Changer l'image de fond au survole des liens
Résolu
lautre
-
lautre -
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:
Le js:
Et dans le html:
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?
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?
3 réponses
-
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 -
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. -
Pour ceux que ça intéresse, j'ai trouvé ce qui m'intéressait ici: https://forums.commentcamarche.net/forum/affich-7952313-affichage-d-un-div-au-survol-d-un-lien
