Bonjour, j'utilise un code simple pour changer d'image en survolant avec;
<A href="http://www.x.com" onmouseover="document.Same_size_LINK.src="rist.jpg"" onmouseout="document.Same_size_LINK.src="ist.jpg"">
<IMG SRC="ist.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=85 BORDER=0 >
</A>
code. Cela fonctionne parfaitement, mais lorsque j'essaie d'utiliser deux de ces codes, ils ne fonctionnent pas tous les deux.
<A href="http://www.x.com" onmouseover="document.Same_size_LINK.src="r.jpg"" onmouseout="document.Same_size_LINK.src="d.jpg"">
<IMG SRC="d.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=105 BORDER=0 >
</A><br><br>
<A href="http://www.y.com" onmouseover="document.Same_size_LINK.src="rist.jpg"" onmouseout="document.Same_size_LINK.src="ist.jpg"">
<IMG SRC="ist.jpg" NAME="Same_size_LINK" WIDTH=296 HEIGHT=85 BORDER=0 >
</A>
Je ne pouvais pas résoudre ce problème, pouvez-vous m'aider?
Réponses:
1 pour la réponse № 1Vous devez distinguer les noms, ou mieux, utiliser document.getElementById et ajouter des identifiants uniques aux images
<A href="http://www.x.com" onmouseover="document.getElementById("Same_size_LINK-1").src="r.jpg"" onmouseout="document.getElementById("Same_size_LINK-1").src="d.jpg"">
<IMG SRC="d.jpg" id="Same_size_LINK-1" WIDTH=296 HEIGHT=105 BORDER=0 >
</A><br><br>
<A href="http://www.y.com" onmouseover="document.document.getElementById("Same_size_LINK-2").src="rist.jpg"" onmouseout="document.getElementById("Same_size_LINK-2").src="ist.jpg"">
<IMG SRC="ist.jpg" id="Same_size_LINK-2" WIDTH=296 HEIGHT=85 BORDER=0 >
</A>
1 pour la réponse № 2
Faire ceci:
<a href="http://www.x.com"
onmouseover="document.Same_size_LINK_1.src="r.jpg""
onmouseout="document.Same_size_LINK_1.src="d.jpg"">
<img src="/images/d.jpg" name="Same_size_LINK_1" width="296"
height="105" border="0" />
</a>
<br /><br />
<a href="http://www.y.com"
onmouseover="document.Same_size_LINK_2.src="rist.jpg""
onmouseout="document.Same_size_LINK_2.src="ist.jpg"">
<img src="/images/ist.jpg" name="Same_size_LINK_2" width="296"
height="105" border="0" />
</a>
1 pour la réponse № 3
Tout d'abord, bienvenue dans L'AVENIR! Comment s'est passé votre séjour dans le refuge anti-retombées? Déçu que le monde ne se termine pas en 99?
Deuxièmement, javascript n'est pas nécessaire pour cela. Vous pouvez le faire comme ceci: http://jsfiddle.net/Shmiddty/Eg6wV/
HTML:
<a href="http://www.x.com" class="image-button" id="button-x"/>
<a href="http://www.y.com" class="image-button" id="button-y"/>
CSS:
.image-button{
display:block;
width:296px;
}
#button-x{
height:105px;
margin-bottom:1em;
background:url(http://placehold.it/296x105/) no-repeat;
}
#button-x:hover{
background:url(http://placekitten.com/296/105) no-repeat;
}
#button-y{
height:85px;
background:url(http://placehold.it/296x85/) no-repeat;
}
#button-y:hover{
background:url(http://placekitten.com/296/85) no-repeat;
}