Images + petites vignettes

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par poupilou, 14 Mai 2012.

  1. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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.
     
  2. M&B Multimédia
    M&B Multimédia WRInaute passionné
    Inscrit:
    1 Octobre 2009
    Messages:
    1 116
    J'aime reçus:
    0
    Oui, c'est possible...

    En utilisant un peu de Javascript.
    :idea: Peut-être que ce genre de chose existe déjà en jQuery.
     
  3. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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 ?
     
  4. M&B Multimédia
    M&B Multimédia WRInaute passionné
    Inscrit:
    1 Octobre 2009
    Messages:
    1 116
    J'aime reçus:
    0
    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...
     
  5. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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 ?
     
  6. M&B Multimédia
    M&B Multimédia WRInaute passionné
    Inscrit:
    1 Octobre 2009
    Messages:
    1 116
    J'aime reçus:
    0
    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 ?
     
  7. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    Ca marche super bien, un grand merci pour ton aide :D
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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 ?
     
  9. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    Quelqu'un peut-il m'aider ?
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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>
    
     
  11. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    903
    J'aime reçus:
    14
    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...
     
Chargement...
Similar Threads - Images petites vignettes Forum Date
Duplicate images pour déclinaisons de produits Débuter en référencement 20 Octobre 2021
Référencement - nom des fichiers images Débuter en référencement 22 Septembre 2021
Page indexée mais pas les images Problèmes de référencement spécifiques à vos sites 10 Juin 2021
Images Webp : peut-on se passer d'images alternatives ? YouTube, Google Images et Google Maps 1 Juin 2021
Adaptives Images et WEBP Développement d'un site Web ou d'une appli mobile 17 Mars 2021
Google Images: URL à la place du titre dans les résultats de recherche YouTube, Google Images et Google Maps 4 Mars 2021
images et alt class Débuter en référencement 15 Janvier 2021
Search Console Problèmes chargements images Crawl et indexation Google, sitemaps 3 Septembre 2020
Vérifier si plusieurs images ont le même poids Développement d'un site Web ou d'une appli mobile 13 Mai 2020
WordPress Questions de SEO pour les images et duplicate content Débuter en référencement 11 Avril 2020