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:
    938
    J'aime reçus:
    15
    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 097
    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:
    938
    J'aime reçus:
    15
    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 097
    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:
    938
    J'aime reçus:
    15
    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 097
    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:
    938
    J'aime reçus:
    15
    Ca marche super bien, un grand merci pour ton aide :D
     
  8. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    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:
    938
    J'aime reçus:
    15
    Quelqu'un peut-il m'aider ?
     
  10. poupilou
    poupilou WRInaute impliqué
    Inscrit:
    9 Février 2004
    Messages:
    938
    J'aime reçus:
    15
    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:
    938
    J'aime reçus:
    15
    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
Profiter de l'attribut "alt=" meme pour les petites images/icones? Débuter en référencement 21 Janvier 2010
Gallerie de petites images Développement d'un site Web ou d'une appli mobile 12 Janvier 2006
Migrer les images de JPEG à WEBP : quel impact perf et SEO ? Référencement Google 28 Septembre 2022
Avis sur mon site - hébergeur de galeries d’images Demandes d'avis et de conseils sur vos sites 26 Août 2022
Recherche Google images : mes photos disparaîssent Référencement Google 25 Août 2022
modification taille images sur jimdo Développement d'un site Web ou d'une appli mobile 18 Août 2022
Désindexation images en changeant de format (passage à WebP) Crawl et indexation Google, sitemaps 12 Juillet 2022
Images - site multilangue Référencement international (langues, pays) 11 Juillet 2022
images ; balises ALT et duplicate content Débuter en référencement 9 Juillet 2022
Liens en do follow ou no follow pour créditer les images ? Netlinking, backlinks, liens et redirections 14 Mai 2022
Images upscalées ou downscalées et le SEO Débuter en référencement 6 Mai 2022
Shopify : images hébergées sur CDN, en dehors du nom de domaine YouTube, Google Images et Google Maps 4 Mai 2022
URL rewriting d'images URL Rewriting et .htaccess 22 Janvier 2022
Quota d'images sur une page Débuter en référencement 10 Janvier 2022
images en responsive, balises et rapidité de chargement Développement d'un site Web ou d'une appli mobile 20 Décembre 2021
problème avec la mise en cache des images de mon site Développement d'un site Web ou d'une appli mobile 19 Décembre 2021
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