Se connecter / S'enregistrer
Votre question

Affichage d'une image avec changement quand le pointeur est dessus

Tags :
  • Time
  • Programmation
Dernière réponse : dans Programmation
4 Septembre 2006 00:16:42

Bonjour à tous,

Voila ce que je cherche à faire:
Je veux mettre une image sur une page. Lorsque la souris passe sur l'image, l'image change (suivant un cycle de 4 images). Quand on "ressort" de l'image, l'image d'origine (la première) revient.

J'aimerais connaitre le code javascript pour l'événement "pointeur dessus".

Merci pour vos renseignements.

Autres pages sur : affichage image changement pointeur

a c 145 L Programmation
4 Septembre 2006 09:57:58

onmouseover="tonimage.src='autreimage.jpg';"
onmouseout="tonimage.src='image.jpg';"
4 Septembre 2006 16:37:44

Voilà mon code:
  1. <html>
  2.  
  3. <body>
  4. <script language="javascript">
  5. var tab = new Array('<a href="http://www.3d-screensaver-downloads.com/images/free-nature-screensaver/big3.jpg" rel="nofollow" target="_blank">http://www.3d-screensaver-downloads.com/images/free-nat...</a>','<a href="http://www.kansas.gov/images/ksphoto/nature/april06/wichita_deer.jpg" rel="nofollow" target="_blank">http://www.kansas.gov/images/ksphoto/nature/april06/wic...</a>','<a href="http://museum.gov.ns.ca/mnh/nature/frogs/thumbs/images/peeper.jpg" rel="nofollow" target="_blank">http://museum.gov.ns.ca/mnh/nature/frogs/thumbs/images/...</a>');
  6. var i = 0;
  7. var timer = 0;
  8. function diapo()
  9. {
  10. document.getElementById('mypict').src=tab[i];
  11. i = (i < tab.length-1)?(i+1):0;
  12. timer = window.setTimeout("diapo()", 5000);
  13. }
  14. function stopdiapo()
  15. {
  16. window.clearTimeout(timer);
  17. document.getElementById('mypict').src = '<a href="http://museum.gov.ns.ca/mnh/nature/frogs/thumbs/images/peeper.jpg" rel="nofollow" target="_blank">http://museum.gov.ns.ca/mnh/nature/frogs/thumbs/images/...</a>';
  18. i = 0;
  19. }
  20. </script>
  21. <img src="<a href="http://goodfelloweb.com/nature/images/vortex.jpg" rel="nofollow" target="_blank">http://goodfelloweb.com/nature/images/vortex.jpg</a>" alt="" title="" id="mypict" onmouseover="diapo()" onmouseout="stopdiapo()" width="450" height="312" />
  22. </body>
  23. </html>

Le seul truc qui ne fonctionne pas, c'est quand j'enlève le curseur de la photo, je n'ai pas l'image d'origine qui revient mais le première image de la série.

Que dois je faire pour remédier à ce problème ?

Merci.
Contenus similaires
4 Septembre 2006 16:42:50

onmouseout="tonimage.src='vortex.jpg';" :o 
4 Septembre 2006 16:53:46

HS : Vous aussi vous avez un bug d'affichage sur la partie droite du site ?
4 Septembre 2006 17:00:12

JarAsh a dit :
onmouseout="tonimage.src='vortex.jpg';" :o 


J'ai essayé plusieurs choses mais cela ne fonctionne pas.

Pourrais tu me donner la syntaxe exacte s'il te plait, sachant que l'url de l'image d'origine est "http://goodfelloweb.com/nature/images/vortex.jpg".

Je débute en javascript et j'ai quelques lacunes...
4 Septembre 2006 17:06:12

Merci !!

Ca marche nickel maintenant !
a c 232 L Programmation
4 Septembre 2006 17:07:24

oui on a un bug d'affichage, car la ligne Array('http://www.3d-screensaver-....... ne contient pas d'espace, donc ça étire la taille !
Bug de la v2 !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS