Changer une image lors du survol d'un lien

Bonjour,

Je cherche à faire un effet qui change une image lors du survol d'un lien. Ceci n'est pas un spam, j'ai trouvé un site sur lequel il y a cet effet (voir le menu principal en haut à droite) :
http://www.imatec-duplication.fr/

DreamWeaver propose ce petit effet sous le nom de "comportement" il me semble. Simplement, DW intègre un JavaScript imageswap, un preload des images et donne un attribut "name" à chaque image que le W3C n'aime pas trop.

J'aimerais trouver un tuto qui explique comment faire cela en CSS validable, svp. Auriez-vous cela ?

Merci beaucoup !

Intéresse toi aux sprites CSS, une recherche sur ton moteur de recherche favoris et hop !

en clair du pourrais faire ça comme ça:

div{background:url(../path/image.jpg) 0 0 no-repeat;}
div:hover{background-position:0 -50px} /* la première pour les abscisses et la deuxième pour les ordonnées */

Salut,

SuperMerguez a écrit :
Intéresse toi aux sprites CSS, une recherche sur ton moteur de recherche favoris et hop !

Attention ! si les images en question ne sont pas décoratives (autrement dit, si elles véhiculent une information indispensable à la compréhension du contenu), l'effet recherché doit être traité en JavaScript.

Bonjour,

Quelque chose comme ça :

<ul id="menu">
<li><img src="img1.jpg"><img src="img2.jpg"></li>
</ul>

ul#menu li img + img {
	display: none;
}

ul#menu li:hover img + img {
	display: block;
	position: absolute;
	top: 0
	left: 0;
}

Si tu veux une solution en CSS, il serait plus pertinent de déplacer ton sujet dans le salon CSS et mise en forme, CSS3.
Modifié par thierry (25 Oct 2012 - 18:24)

Merci pour vos réponses !

Je ne sais pas si je me suis bien exprimé. En fait, quand on survole un lien (texte ou image), je veux que ça fasse apparaître une image qui est ailleurs dans la page. Et quand la souris n'est plus sur le lien, l'image revient à son état initial. Ce n'est pas un simple effet de survol d'image.

En fait, je pense que ce sera du JS ou du jQuery. En CSS ça m'étonnerait que ce soit gérable, mais je tente quand-même.

En css :

img.monImage{display:none} /* L'image est caché sur ton site */
div.maDiv:hover img.monImage{display:block;} /* Au survol de ton choix, ton image s'affiche */

Peu importe ou tu te trouves dans la page.
Modifié par SuperMerguez (26 Oct 2012 - 10:20)