montrer une image au passage de la sourie

sim100 · 25 Août 2005

Bonjour
Je dérange encore

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

e-kiwi · 25 Août 2005

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

bradeux · 25 Août 2005

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

CaYuS · 25 Août 2005

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 <span> par exemple:

Code:

<a href="image1.jpg" title="Image 1" class="vignette"><span><img src="image1-vignette.jpg" /></span></a>
<a href="image2.jpg" title="Image 2" class="vignette"><span><img src="image2-vignette.jpg" /></span></a>
<a href="image3.jpg" title="Image 3" class="vignette"><span><img src="image3-vignette.jpg" /></span></a>

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

Code:

.vignette span { display: none; }

Ensuite tu la rend visible avec un :hover.

Code:

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...

sim100 · 25 Août 2005

merci

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:

<img src="gallery/pet-1.jpg" alt="Click here to review portrait" border="0">

Merci encore

sim100 · 25 Août 2005

merci

Merci cayus je vais essayer ça

e-kiwi · 25 Août 2005

CaYuS · 25 Août 2005

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:

<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>
	<p>
		<a href="image3.jpg" class="vignette" title="Image 3"><img src="image1.jpg" alt="Image 1" /><span><img src="image2.jpg" alt="Image 2" /></span></a>&nbsp;
		<a href="image6.jpg" class="vignette" title="Image 6"><img src="image4.jpg" alt="Image 4" /><span><img src="image5.jpg" alt="Image 5" /></span></a>&nbsp;
		<a href="image9.jpg" class="vignette" title="Image 9"><img src="image7.jpg" alt="Image 7" /><span><img src="image8.jpg" alt="Image 8" /></span></a>
	</p>
</body>
</html>

narayana · 25 Août 2005

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