montrer une image au passage de la sourie

WRInaute passionné
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
 
WRInaute accro
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 :)
 
WRInaute occasionnel
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...
 
WRInaute passionné
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
 
WRInaute accro
<img src="gallery/pet-1.jpg" alt="Click here to review portrait" border="0" onmouseover='this.src="./gallery/pet-2.jpg"' onmouseout='this.src="./gallery/pet-1.jpg"'>
 
WRInaute occasionnel
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>
 
Discussions similaires
Haut