Changer l'image de fond au survole des liens [Résolu/Fermé]

lautre - 23 mars 2010 à 01:19 - Dernière réponse :  lautre
- 23 mars 2010 à 04:06
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?
Afficher la suite 

3 réponses

Blog Trotter 139 Messages postés samedi 9 août 2008Date d'inscription 13 juin 2013 Dernière intervention - 23 mars 2010 à 01:24
+1
Utile
Hello,

Je pense que tu te compliques la vie avec le Javascript.

Je t'invite à te renseigner sur les propriétés CSS {display:block; background-image:}

Un exemple que je connais très bien pour avoir bossé dessus : jette un oeil au code html et aux css de cette page : http://www.voyage-net.com/

Et notamment les onglets du header...

Bon courage
Cette réponse vous a-t-elle aidé ?  
0
Utile
C'est ce que j'avais commencé par faire (avec un span display a:hover)...
mais comme les trois liens sont sur la même image qui dois changer au survole, les liens sont recouverts par la nouvelle image (et donc inaccessible) et le z-index ne change rien à au problème.

Pour être plus claire: contrairement à ton exemple, le background-image qui doit changer n'est pas celui du div qui contient le lien, mais le div parent qui contient tous les liens.
0
Utile
Pour ceux que ça intéresse, j'ai trouvé ce qui m'intéressait ici: http://www.commentcamarche.net/...