montrer une image au passage de la sourie

**le Jeu Aoû 25, 2005 14:00**

Bonjour
Je dérange encore :oops:

J'essaye de trouver un script qui permet de:
lorqu'une personne passe la souris sur une image du site, une image en survol apparait avec une autre photo dedans.
Je précise que la personne ne doit pas cliquer sur l'image pour que l'autre se montre.
Juste la souris passe sur la photo et une autre image se montre en survol.

J'ai déja vu ça quelquepart.

Quelqu'un a t-il ça sous la main?

Merci d'avance

**le Jeu Aoû 25, 2005 14:05**

onmouseover='this.src="./nouvelleurl"' onmouseout='this.src="./anciennesource"' ? :-)

remplacer this par nom de l image si tu veux changer une image pas située sous la souris :-)

**le Jeu Aoû 25, 2005 14:14**

-http://www.editeurjavascript.com/scripts/scripts_images_1_52.php

**le Jeu Aoû 25, 2005 14:14**

Tu peux aussi faire cela en CSS.
Je t'explique le principe :

Tu mets tes images qui seront affichées au survol de la souris dans des balises par exemple:

Code: Tout sélectionner: <a href="image1.jpg" title="Image 1" class="vignette"><img src="image1-vignette.jpg" /></a> <a href="image2.jpg" title="Image 2" class="vignette"><img src="image2-vignette.jpg" /></a> <a href="image3.jpg" title="Image 3" class="vignette"><img src="image3-vignette.jpg" /></a>

Par défaut tu indiques dans ton css que la balise est masquée.

Code: Tout sélectionner: .vignette span { display: none; }

Ensuite tu la rend visible avec un :hover.

Code: Tout sélectionner: a.vignette:hover span { display: block; }

Libre à toi d'adapter ça en fonction de tes envies, comme par exemple, faire apparaître la vignette toujours au même endroit dans la page, quelque soit l'image...

**le Jeu Aoû 25, 2005 14:14**

Merci
Mais ça se place comment ce truc, je sais je ne suis pas doué :cry:

Pour l'instant j'ai un truc du type

Code: Tout sélectionner: <img src="gallery/pet-1.jpg" alt="Click here to review portrait" border="0">

Merci encore

**le Jeu Aoû 25, 2005 14:16**

Merci cayus je vais essayer ça

**le Jeu Aoû 25, 2005 14:16**

**le Jeu Aoû 25, 2005 14:59**

En essayant de refaire le script, je me rends compte que ça ne fais pas très joli au passage de la souris, et je ne retrouve plus le code adéquat.
Tu ferais peut être mieux d'utiliser la proposition d'e-kiwi

Si malgré tout il y en a que ça intéresse, voilà le bout de code fonctionnel pour ce dont je parlais, qui sert à afficher l'image en question toujours au même endroit :

Code: Tout sélectionner: <head> <style type="text/css"> .vignette span { display: none; /* On masque le span par défaut */ } a.vignette:hover { border: 0; /* Pour que ce soit fonctionnel sous IE */ } a.vignette:hover span /* On définit où va s'afficher l'image au passage de la souris */ { display: block; position: absolute; top: 150px; left: 150px; } </style> </head> <body> <a href="image3.jpg" class="vignette" title="Image 3"><img src="image1.jpg" alt="Image 1" /><img src="image2.jpg" alt="Image 2" /></a>  <a href="image6.jpg" class="vignette" title="Image 6"><img src="image4.jpg" alt="Image 4" /><img src="image5.jpg" alt="Image 5" /></a>  <a href="image9.jpg" class="vignette" title="Image 9"><img src="image7.jpg" alt="Image 7" /><img src="image8.jpg" alt="Image 8" /></a> </body> </html>

**le Jeu Aoû 25, 2005 17:13**

Fais cela en css c'est beaucoup mieux que le javascript
Voir les tutoriaux sur alsacreation http://css.alsacreations.com/ qui demeure la référence

montrer une image au passage de la sourie

montrer une image au passage de la sourie

merci

merci

Formation recommandée sur ce thème :

Lectures recommandées sur ce thème :

Qui est en ligne