Images + petites vignettes

WRInaute passionné
Salut à tous,

J'affiche mes produits sous forme d'images (vignettes) de dimensions 150 x 150 px, j'ai 4 vignettes par ligne et 4 lignes par page (16 images au total par page).

Je souhaiterai lorsqu'on passe la souris sur l'une des mes images que s'affiche sur cette image (en bas, sur une même ligne) 4 ou 5 toutes petites images (vignettes) de ce produit mais vu sous un autre angle. J'aimerai ensuite que lorsqu'on passe sa souris sur ces petites vignettes cela affiche l'image correspondante à la place de la grande image.

Est-ce réalisable ?

Si oui quelle technique préconisez-vous pour arriver à ce résultat ?

Merci pour vos réponses.
 
WRInaute passionné
Merci pour ta réponse.

J'avais pensé à du CSS avec des div (cachés) pour l'affichage des petites vignettes et du javascript pour ce qu iest du onmouseover et onmouseout, mais ce qui me pose probème c'est l'affichage de la grande image lorsqu'on passe la souris sur ces petites vignettes, comment lui dire d'afficher cette image à la place de l'autre tout en gardant les petites vignettes visibles sur cette image ?
 
WRInaute passionné
onmouseover + getElementById + img src

Dès que la souris passe au dessus de la vignette, changement de src de la photo principale. Rien de bien méchant...
 
WRInaute passionné
J'ai réussi à mettre mes 5 miniatures sous mon image principale, j'ai mis mon image principale dans une div que j'ai appelé <div id"image"> mais comment faire maintenant apparaitre mes autres photos (à la place de mon image principale dans la <div id"image">) sur le onmouseover des miniatures ?
 
WRInaute passionné
Tu peux donner un "id" à ton img principale => <img id="img-principale" src="img-principale.jpg" alt="Image principale" />.

Ensuite, sur chaque vignette, tu peux faire un onmouseover="document.getElementById('img-principale').src='vignette-agrandie.jpg';"

C'est assez clair ?
 
WRInaute passionné
J'aimerai que sur la dernière vignette lorsqu'on passe la souris dessus, ça lance une video swf à la place de mon image principale <img id="img-principale" src="img-principale.jpg" alt="Image principale" />, comment faire cela ?
 
WRInaute passionné
J'ai bidouillé ce bout de code mais ça fonctionne pas :( , il doit y avoir une erreur avec les " ou ' dans le javascript, quelqu'un peut-il me dire ou c'est faux ?

Code:
<a href="#" onmouseover="document.getElementById('video').innerHTML = '<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ID='mapcontrols' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0' width='250' height='250'><param name='movie' value='ma_video.swf'><param name='quality' value='high'><embed name='mapcontrols' src='ma_video.swf' quality='high' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' autostart='true' height='250' width='250' border='0'></embed></object>';">Lire la vidéo</a>

<div id="video"></div>
 
WRInaute passionné
Bon j'ai trouvé la solution, il suffit de virer les ' dans le :
Code:
<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' ID='mapcontrols' etc...
Ca devient donc :
Code:
<object classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 ID=mapcontrols etc...
 
Discussions similaires
Haut