Signaler

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

Posez votre question lautre - Dernière réponse le 23 mars 2010 à 04:06 par lautre
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?
Utile
+1
plus moins
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é ?  
Utile
+0
plus moins
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.
Utile
+0
plus moins
Pour ceux que ça intéresse, j'ai trouvé ce qui m'intéressait ici: http://www.commentcamarche.net/...

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !