Rollover sur image faisant apparaître des vignettes cliquables?

Bonjour,

Je travaille sur une gallerie photo, et j'aimerai bien rajouter un petit effet sympa, à savoir un rollover (jusque là tout va bien) me faisant apparaître une vignette avec une petite icône Flickr avec possibilité pour le visiteur de cliquer dessus et de le renvoyer sur ma gallerie flickr.

J'espère que je suis clair.

Merci par avance pour votre aide

Michel

J'ai bien un petit rollover à base de :

<a href="page.html"
onMouseOver="document.img_1.src='img/gris/17g.jpg';"
onMouseOut="document.img_1.src='img/17.jpg';">
<img class="img" name="img_1" src="img/17.jpg">


Mais c'est bien pour changer une image en une autre au passage du curseur.
En aucun cas pour mettre des liens hypertexte....

Déjà merci pour ta réponse.
Alors, voici ma structure en gros, dis moi si c'est suffisant sinon je peux en coller plus

	
<div class="conteneur">
		
(agrémenté ou pas d'un code style :
	<a href="page.html"
onMouseOver="document.img_1.src='img/gris/17g.jpg';" 
onMouseOut="document.img_1.src='img/17.jpg';"> 
<img class="img" name="img_1" src="img/17.jpg"> 
)


</a>
			<img src="img/16.jpg" alt="16" title="16" />
			<img src="img/13b.jpg" alt="13b" title="13b" />
			<img src="img/13.jpg" alt="13" title="13" />
			<img src="img/12.jpg" alt="12" title="12" />
</div>

.conteneur {

	display: inline-block;
	
	vertical-align:top;
	margin-left: 0%;
margin-top: 220px;
	width: -moz-calc(100% - 0px);
 	width: -webkit-calc(100% - 0px);
 	width: -ms-calc(100% - 0px);
 	width: calc(100% - 0px);
	white-space:nowrap;
		
}.ltIE8 .gauche, .ltIE8 .conteneur {display:inline;}

OK pour utiliser Hover, cependant je ne comprend pas comment il est possible de rajouter un lien hypertexte sur la photo lorsque le curseur passe dessus?

Il faut avoir l'esprit un peu plus créatif. Ce n'est pas parce qu'il apparaît qu'il est forcément crée.
Il suffit de l'intégrer d'emblée et de le masquer, puis de l'afficher au ":hover".
Tu auras besoin de positionnement absolu, d'un "overflow:hidden" et de jouer sur la propriété "top" ou "left" par exemple.

OK merci j'ai bien saisi la philosophie.

Mais encore une chose, j'arrive à l'afficher sur ma 1ère photo, soit afficher une div "vignette" sur une div "conteneur",

pour que le lien se reproduise sur chaque photo, il faudrait que chaque photo soit dans une div différente non?

		
<div class="vignette">	
		
		<a href="http://www........"><img src="img/fb.png" alt="FB"/ BORDER="0"></a>
		
</div>		
		
		
		
<div class="conteneur">
	
			<img src="img/18.jpg" alt="18" title="18" />
			<img src="img/17.jpg" alt="17" title="17" />
			<img src="img/16b.jpg" alt="16b" title="16b" />
			<img src="img/16.jpg" alt="16" title="16" />
			<img src="img/13d.jpg" alt="13d" title="13d" />
			<img src="img/13c.jpg" alt="13c" title="13c" />
			<img src="img/13b.jpg" alt="13b" title="13b" />
			<img src="img/13.jpg" alt="13" title="13" />
			<img src="img/12c.jpg" alt="12c" title="12c" />
			<img src="img/12b.jpg" alt="12b" title="12b" />
			<img src="img/12.jpg" alt="12" title="12" />
			<img src="img/11b.jpg" alt="11b" title="11b" />
			<img src="img/10b.jpg" alt="10b" title="10b" />
			<img src="img/9.jpg" alt="9" title="9" />
			<img src="img/8.jpg" alt="8" title="8" />
			<img src="img/7b.jpg" alt="7b" title="7b" />
			<img src="img/6b.jpg" alt="6b" title="6b" />
			<img src="img/5b.jpg" alt="5b" title="5b" />
			<img src="img/4b.jpg" alt="4b" title="4b" />
			<img src="img/2.jpg" alt="2" title="2" />
			<img src="img/3.jpg" alt="3" title="3" />
			<img src="img/1.jpg" alt="1" title="1" />		
		
</div>
		

.vignette {
position: absolute; 


	display: inline-block;
	
	vertical-align:top;
	margin-left: 0%;
margin-top: 220px;
	width: -moz-calc(100% - 0px);
 	width: -webkit-calc(100% - 0px);
 	width: -ms-calc(100% - 0px);
 	width: calc(100% - 0px);
	white-space:nowrap;
}

.conteneur {


	display: inline-block;
	
	vertical-align:top;
	margin-left: 0%;
margin-top: 220px;
	width: -moz-calc(100% - 0px);
 	width: -webkit-calc(100% - 0px);
 	width: -ms-calc(100% - 0px);
 	width: calc(100% - 0px);
	white-space:nowrap;
		
}.ltIE8 .gauche, .ltIE8 .conteneur {display:inline;}

Modifié par cptbartok (23 Nov 2014 - 21:45)

Bonjour,
J'ai fait un plugin qui fait ce que tu souhaites :
mon plugin
regarde le dernier exemple dans l'onglet "exemples"

Mais bon, il n'est pas encore distribuable, je suis en train de le paufiner, mais ça te donne une idée
Modifié par quice (26 Nov 2014 - 20:34)

Voici un exemple très moche.

Je viens d'essayer 3h de suite d'adapter les 2 derniers exemples mais sans succès (d'ailleurs ça m'énerve un peu...)
oui je comprend bien la philosophie, mais dans ton dernier exemple le principe est qu'à chaque "div", tu rajoute une condition "nav" qui est en dehors de l'image (hors survol) et sur l'image (pendant le survol).

Chez moi, je ne crois pas que ça puisse s'appliquer à mon "conteneur" qui comprend X images puisqu'en gros j'ai un seul "div". Donc en clair, la petite vignette s'affiche bien en haut à gauche, mais une seule fois pour toute ma galerie de photos.

Si je dois modifier mon html avec une "div" par image, je n'arriverai plus à garder mes autres propriétés (scroll horizontal, et photos alignées horizontalement). En tout cas, je n'ai pas réussi.

Est-ce que ton exemple peut s'adapter à ma contrainte?