Survol double d'image
Bonjour,
Je souhaite en survolant une image A, qu'elle soit remplacer par une image B mais aussi qu'un autre image C ailleurs dans la page soit alors remplacer par une image D.
J'arrive a faire les 2 séparément en Javascript (A remplacé par B, et C remplacé par D) mais je n'arrive pas a cumuler les 2 actions.
Si vous aviez une solution ...
Merci par avance
Marianne
Je souhaite en survolant une image A, qu'elle soit remplacer par une image B mais aussi qu'un autre image C ailleurs dans la page soit alors remplacer par une image D.
J'arrive a faire les 2 séparément en Javascript (A remplacé par B, et C remplacé par D) mais je n'arrive pas a cumuler les 2 actions.
Si vous aviez une solution ...
Merci par avance
Marianne
3 réponses
-
Voir les remarques dans le code ci-dessous.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <script> var imgA = new Image(); imgA.src= "imgA.jpg"; var imgB = new Image(); imgB.src= "imgB.jpg"; var imgC = new Image(); imgC.src= "imgC.jpg"; var imgD = new Image(); imgD.src= "imgD.jpg"; imgTemp1 = new Image(); imgTemp1.src=imgA.src; imgTemp2 = new Image(); imgTemp2.src=imgC.src; function changeImages(){ elmsA = document.getElementsByName("A"); imgTemp1.src = (imgTemp1.src==imgA.src?imgB.src:imgA.src); imgTemp2.src = (imgTemp2.src==imgC.src?imgD.src:imgC.src); for(i=0 ; i<elmsA.length ; i++){ elmsA[i].src=imgTemp1.src; } elmsC = document.getElementsByName("C"); for(i=0 ; i<elmsC.length ; i++){ elmsC[i].src=imgTemp2.src; } } </script> </head> <body> Place le pointeur de la souris sur la première image.<br/> Avec ce petit script tu peux changer simultanément autant d'images que tu le désires.<br/> Seules les images dont les méthodes 'onmouseover' et 'onmouseout' seront définies comme suit:<p/> <pre>onmouseover="changeImages();" onmouseout="changeImages();"
</pre>
seront réactives au survol.<p/>
<img name="A" src="imgA.jpg" onmouseover="changeImages();" onmouseout="changeImages();"/>
<p/>
<img name="C" src="imgC.jpg" />
<p/>
blabla
<img name="C" src="imgC.jpg" />
<img name="A" src="imgA.jpg"/>
<img name="C" src="imgC.jpg" />
blabla blabla blabla blabla blablablabla blablablabla
<img name="A" src="imgA.jpg"/>
</body>
</html>
</pre>
;-)
HackTrack -
Contributeursalut,
j'aimerai savoir s'il t'es pas possible d'associer ton image A a C et ainsi de faire les deux actions en cascades ?
je me reexplique :
tu te cree un tableau de liens :
t[A] = C
t[B] = D
et lorque tu as une action sur A tu fais
action1(A)
action2(T[A])
voila ...
je sais pas si ca pourra t'aider mais bon ....
Bon courage !
JSS-
euh ... j'ai pas tout compris mais merci de ta réponse
désolée :-)
je m'y connais pas trop en javascript en tout cas pas assez je pense pour faire des tableaux.
Moi ce que je fais c ca :
<a onmouseover="rollover.src=B" onmouseout="rollover.src="A"><IMG SRC="A" name="rollover" ></a>
ca permet au survol de A de faire apparaitre B
Est ce qu'il n'y a pas une solution simple pour que C deviene D en meme temps ?
Merci par avance
Désolée d'abuser
Maya -
Contributeur@Mayaje m'y connais pas trop en javascript mais bon ... je continue d'essayer de t'aider ...
alors en javascript quand tu as onmouseover tu fais action1
action1
{
rollover.src="B3
imageAutre.src="D"
}
on mouseout tu fais action2
action2
{
rollover.src="A"
imageAutre.src="C"
}
c'est possible ca ?
Bon courage !
JSS
-
-
re bonjour,
je crois que la pause de midi m'a bien aidé ainsi que vos commentaires :-)
ca y est ca marche, en fait le code est tout simple.
<a onmouseover="rollover.src=B;rollover2.src=D" onmouseout="rollover.src="A;rollover2.src=C">
<IMG SRC="A" name="rollover" ></a>
...
<IMG SRC="C" name="rollover2" >
j'avais déjà essayer mais ca n'avais pas du tout marché, j'avais du faire une erreur :-)
En tout cas merci pour votre aide
a+
Maya
