Changer l'image de fond au survole des liens

Bonjour,

Je ne connais rien en javascript, mais il me faut pourtant bidouiller un truc.
Je dois faire en sorte qu'au survole des liens le background-image d'un div change.

Après avoir fouiller sur la toile voici ce que j'ai fait:

Dans le css:

div#liens {
width:600px;
height:425px;
background-image: url(mocel/Pot-de-peinture1.png);
}

Le js:

<script type="text/javascript">
function change(p) {
document.getElementById("liens").style.backgroundImage='url(morcel/Pot-de-peinture'+p+'.png)'; 
}	
</script>

Et dans le html:

<div id="liens">
        <p><a href="blabla.pdf" onmouseover='change(2)' onmouseout='change(1)'>blabla</a></p>
        <p><a href="bloblo.pdf" onmouseover='change(3)' onmouseout='change(1)'>bloblo</a></p>
</div>

Mais le fait est que lorsque la souris survole les liens, l'image disparait (et ne réapparait pas quand elle s'en retire)...
Qu'ai je mal fait, pouvez-vous m'aider?