[Résolu] Lien sur une image, roll over avec image png dessus

Bonjour,
J'ai un immense dilemne. Je ne sais pas, mais vraiment pas comment résoudre
mon problème.

J'ai une galerie d'image. Chacune d'elle comporte un lien. J'aimerais qu'en roll over
il y ait une deuxième image en png qui vienne se poser dessus.

Je vous montre en image :
Lien normal


Lien roll over


D'avance merci beaucoup pour votre aide.
Modifié par Alore (20 Jun 2007 - 16:12)

Un script javascript qui va afficher une div en onRollOver et la masquer en onRollOut. Tu dois pouvoir trouver assez facilement ce genre d'effet soit sur ce forum, soit sur ce site.
Modifié par <nicolas> (20 Jun 2007 - 16:15)

Ahahah, drôle le coup du lien google....

Justement si je poste ici c'est pour avoir une solution css et non javascript.
Je n'aime pas résoudre le moindre problème avec des solutions faciles
mais merci tout de même de cette réponse rapide.

Alore a écrit :
Je n'aime pas résoudre le moindre problème avec des solutions facile.

Ce n'est pas une "solution facile" mais à mon avis la plus appropriée. Javascript et CSS sont deux langages bien distincts dont l'utilisation ne devrait pas se recouper. CSS est utilisé pour styliser et mettre en page une page html, tandis que javascript va gérer les événements.

C'est pour ça que dans ton cas, je proposais une solution javascript, qui sera d'ailleurs plus simple à mettre en place.


EDIT: Pour la solution css, il faudrait avoir un élément qui représente la zone sensible (ici sûrement un div) et à l'intérieur de ce div, un autre élément (ton img) en display:none. Et ensuite en css, tu déclares:

div.zone:hover img.masque { diplay:block; }

Malheureusement, cette solution a ses limites. Entre autres la non-prise en charge du :hover sur autre chose que les a par IE6. Il est peut-être possible de bricoler qqch avec un lien, mais ça me semble bien compliqué. Sinon à toi de voir si tu préfères ignorer les 50-60% d'utilisateurs d'IE6, ou bien les 5% d'utilisateurs sans javascript.
Modifié par <nicolas> (20 Jun 2007 - 16:32)

Ben merci pour cette solution mais finalement j'ai trouvé mon bonheur.
Je le poste tout de même au cas ou quelqu'un en aurait besoin.

Pour l'Html

<div class="GalleriesListLink">
<a href=""><img src="images/Galleries/List/Label09.jpg" class="GalleriesListLabel" /><span><img src="images/Galleries/List/GalleriesListRollOver.png"/></span></a>	
</div>

Pour le CSS

.GalleriesListLink {
	float: left;
	position: relative;
	height: 120px;
	width: 120px;
	}
.GalleriesListLink a, .GalleriesListLink img {
	border: none;
	background: none;
	padding: 0;
	}
.GalleriesListLink a {
	text-decoration: none;
	}
.GalleriesListLink a:hover {
	background: none; /* correction d'un bug IE */
	}
.GalleriesListLink a span {
	display: none;
	}
.GalleriesListLink a:hover span {
	display: inline;
	position: absolute;
	top: 0;
	left: 0;
	width: 120px;
	height: 120px;
	text-align: center;
	}

Voilà, le problème est résolu

Si jamais voici le lien que j'ai trouvé pour le faire
Modifié par Alore (21 Jun 2007 - 08:26)