Photo cliquable

potopoto -  
bonjour,

je cherche à mettre dans une page une mosaïque de vignettes et quand la souris passe dessus, je boudrais que la photo apparaisse en grand sur un côté de ma page.
Si quelqu'un peut m'aider.
meri d'avance
Configuration: Windows XP
Internet Explorer 6.0

48 réponses

Résumé de la discussion

La demande porte sur la réalisation d'une mosaïque de vignettes où, au survol de chaque image, une photo agrandie s'affiche sur le côté de la page. Plusieurs réponses proposent d'utiliser le CSS pour afficher l'image agrandie en marge via un effet hover, en plaçant une zone galerie et en déplaçant ou affichant l'image complète au passage de la souris. Des conseils évoquent aussi l'utilisation d'un élément div séparé sous la gallery, l'optimisation du poids des images et l'ajout d'un comportement actif sur clic pour verrouiller l'image choisie.

Bobot (l’IA à votre service)
  1. RAD ZONE Contributeur
    SALUT

    si c est cela que tu veux ICI

    telecharge mon exemple ICI et adapte le a ton site

    ps: il y as 3 exemples dans le .rar les 2 autres exemples n ont rien a voir avec ce que tu veux :-))

    RAD
    2. malou48
      Bonjour rad zone

      je débute dans un blog , je fais des photos et je souhaiterais fair ela presentation dont tu as mis l'exemple une vignette qui s'aggrandit quand on passe dessus . peux tu m'aider en me donnant les infos necessaires , le logiciel que tu utilises? merci beaucoup. je ne comprends rien , enfin du moins pas grand chose.
    3. anneso
      Bonsoir,
      je fabrique un petit site avec des travaux à présenter; et donc une petite galerie avec des vignettes qui s'agrandissent. Ton code me plait beaucoup. Est ce que c'est possible de faire la même chose au "clic" plutôt qu'au survol de la vignette (sans javascript et php) ?
      Et bien merci s'y réponse s'en suit...
    4. versoph
      Merci pour le conseil c'est très sympa de communiquer son "savoir" bonne continuation et MOULT MERCI again
    5. versoph
      Salut rad,
      J’ai simplement essayé « photo cliquable » pour voir ce que cela donnait, mais ne l’ai pas utilisé pour un site, si jamais je le fais je t’enverrai immédiatement un lien, c’était pour te remercier de communiquer ta « science » au quidam....
  3. RAD ZONE Contributeur
    loool salut gryz ;))

    ca m apprendra a pas verifier apres tidy :-)) merci

    mais etonanant que tidy est change ca ?? ou c est moi :())??

    RAD
    1. gryzzly Contributeur
      aucune idée, je connais pas tidy... seulement de nom depuis le temps que tu le rabaches ici :-D
      mais j'opte plutot pour la solution : TOI héhé... meme si c'est tidy qui fait ca, c'est parce que tu l'as configuré ainsi (ou mal configuré.. voire pas configuré)

      enfin, j'dis ca, j'dis rien...

      courage (en meme temps, y'a pas grand chose à modifier)
      2. RAD ZONE Contributeur
        oui une petite erreur de config ;-)) sur tidy (dont je suis en train de faire une version .exe francaise )
        c est change sur le site mais il vas faloir que je regarde les autres tuto :-((

        Merci
        1. sophie
          bonjour Radzone
          j'ai téléchargé ton exemple 'photo simple' impec marche super, par contre sur la colonne de gauche lorsqu'on passe la souris sur une des vignettes, ça décale 2 vignettes vers le bas, surton exemple aussi, est ce possible de corriger cela?
          autre question, comment changer la taille des vignettes?

          merci d'avance
          sophie
      3. RAD ZONE Contributeur
        SALUT

        pour retirer le decalage des images sur internet explorer ( cela ne le fais que sur explorer)!

        il suffit d enlever la "border" 1px! et pour agrandir les vignettes ,tu change leurs taille comme ici je les aient passees a 80px 

        #thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 80px;
	height: 80px;
  <--------------------------- supression de cette ligne (border: 1px solid #000;)
}
#thumbs a img {
	width: 80px;
	height: 80px;
	border: 0;
}


        RAD
        1. sophie
          salut, je dois etre bigleuse, je ne vois pas ces lignes dans le code html???
        2. sophie
          @sophieca y est excuses moi
          c parfait merci bq
      4. sophie
        Bonjour,
        c'est encore moi!!
        je voudrais utiliser ton exemple sur une page que j'ai deja cree mais comment modifier ton fichier pour avoir 4 ou 5 miniatures en bas à l'horizontale et la photo qui apparaisse au dessus???

        merci d'avance
        1. ilan27
          Bonjour,
          je ne m'y connais pas beaucoup en js, mais je te propose ceci, à l'endroit où tu veux mettre ta grande photo:

          <script language="javascript">
          <!--
          function newimg(var){
          document.write("<img src='"+var+"' border='0'>");
          }
          //-->
          </script>
          Pour chaque image-lien: <a onClick="javascript: newimg(...le nom de l'image qui va suivre...);"><img...ta vignette></a>
          1. RAD ZONE Contributeur
            SALUT ILAN

            non il parle d un de mes exemple en pur CSS CELUI LA

            il faut que tu modifis cela dans le CSS en positionant la <div id="gallery"> ou tu veux qu elle soit !!

            il faut aussi prevoir le passage des thumbs en inline !! mais je t annonce il y as du boulot !!!!

            RAD
            2. sophie
              Bonjour,
              merci mais pourrais tu m'ecrire le code car je ne comprends pas bien quand tu dis en inline

              merci
              1. RAD ZONE Contributeur
                SALUT

                bon si on prend mon exemple comme base voila ce que tu peux faire si on veux faire simple !!!!

                POUR 5 IMAGES
                HTML 
                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <meta name="generator" content="PSPad editor, www.pspad.com" />
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="photo_simple.css" />
  </head>
  <body>

    <div id="gallery">
      <em id="thumbs">
        <a href="#nogo">
          <img src="1_images.jpg" title="" alt="" /></a>
        <a href="#nogo">
          <img src="2_images.jpg" title="" alt="" /></a>
        <a href="#nogo">
          <img src="3_images.jpg" title="" alt="" /></a>
        <a href="#nogo">
          <img src="4_images.jpg" title="" alt="" /></a>
        <a href="#nogo">
          <img src="5_images.jpg" title="" alt="" /></a>
      </em>
    </div>
  </body>
</html>


                CSS seul les gras ont ete modifie !! 
                body {
	background-color: #000000
}
#gallery {
	position: relative;
	width: 750px;
}
#thumbs {
	width: 300px;   <-------- largeurs augmente pour acceuillir 5 OU 6  : 50 px X 6 =300 :  images (methode pour eviter trop de changement )
	float: left;
}
#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 50px;
	height: 50px;
	border: 1px solid #000;
}
#thumbs a img {
	width: 50px;
	height: 50px;
	border: 0;
}
#thumbs a:hover {
	border-color: #ddd;
}
#thumbs a:hover img {
	position: absolute;
	width: auto;
	height: auto;
	left: 185px;
	top: 60;  <-------------descente de la grande image par raport au haut de page
	border: 1px solid #333;
}


                RAD
                2. coquillette64
                  Bonjour,
                  je commence a suivre pas a pas ce sujet mais j'avoue que je ne m'en sors pas
                  j'utilise dreamweaver, je fais un copier coller de ta source sur dreamweaver, je mets mes quelques photos, mais quand je fais un apercu sur explorer je retrouve seulement les petites vignettes, l'aperçu en grand ne se fait pas, que dois je faire?
                  merci a vous
                  2. coquillette64
                    Merci j'ai reussi a comprendre qu'il fallait combiner les 2!!

                    Par contre pour votre deuxieme exemple (là ou il suffi de glisser la souris pour que l'image apparaise)
                    Je pense que le procédé est le même, cependant je n'y arrive pas.
                    Je me doute que je dois changer les éléments que j'ai mentionner en gras avec mes propres données, mais je ne sais pas quoi mettre à la place pour que cela fonctionne

                    Je dois écrire mon site internet? (alors qu'il n'est pas fini)
                    J'avou etre un peu perdue

                    Sophie

                    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
                    <html>
                    <head>
                    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
                    <meta name="generator" content="PSPad editor, www.pspad.com" />
                    <title>
                    </title>
                    <link rel="stylesheet" type="text/css" href="imagelinkhover.css" />
                    </head>
                    <body>
                    <a class="screen" href="http:radservebeer.free.fr"> RAD ZONE
                    <b>
                    <img src="http://rad2.free.fr//Formulaire_Free/images/avatar/3567.gif" alt="website image"width="200" height="150" title="website image" /></b></a>
                    </body>
                    </html>
                    1. RAD ZONE Contributeur
                      non c est une image sur un lien !

                      radservebeer est le lien vers la page cible ( mon site dans cet exemple )

                      et

                      rad 2 est le chemin vers l image !

                      RAD
                      1. lilas
                        Bonjour,
                        je suis un peu desepérée parce que l'exemple que tu donnes est génial (photo cliquable qui s'agrandit),c'est exactement ce qu'il me faut pour mon site, mais je débute, et je ne sais pas quoi faire des fichiers que j'ai téléchargés (j'ai cherché un peu partout je ne comprends pas). Je crée mon site avec nvu . Est ce que je dois mettre tous les fichiers sur le webftp? Je te remercie d'avance, j'espère que tu pourras m'éclairer...
                        Lilas
                        1. RAD ZONE Contributeur
                          SALUT

                          tu ajoute ca a ton css
                          #gallery {
	position: relative;
	width: 750px;
}
#thumbs {
	width: 180px;
	float: left;
}
#thumbs a {
	display: block;
	float: right;
	margin: 0 0 5px 5px;
	width: 50px;
	height: 50px;
	border: 1px solid #000;
}
#thumbs a img {
	width: 50px;
	height: 50px;
	border: 0;
}
#thumbs a:hover {
	border-color: #ddd;
}
#thumbs a:hover img {
	position: absolute;
	width: auto;
	height: auto;
	left: 185px;
	top: 0;
	border: 1px solid #333;
}


                          et dans ton html
                          <div id="gallery">
      <em id="thumbs">
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">

          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>

        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">

          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>

        <a href="#nogo">
          <img src="URL DE TON IMAGE" title="" alt="" /></a>
      </em>
    </div>


                          TU PEUX EN METTRE + OU EN ENLEVE

                          ET
                          ET TU ADAPTE LES TAILLES ET POSITION DANS LE CSS

                          RAD
                          1. montignac
                            Bonjour,
                            Après des jours de recherche, j'ai trouvé vos explications qui correspondent exactement à ce que je recherchais.
                            Mais après avoir tout lu, du moins je le pense, avoir suivi vos explications à la lettre, le résultat sous Internet n'est pas concluant.
                            Je développe ave KOMPOZER, et après sauvegarde d'une page, lorsque je visualise avec le Navigateur (INTERNET IE7), le resultat est conforme à mon attente. Mais lorsque après avoir transféré sur mon site mes differnets fichiers, j'obtiens un tableau, mis pas de photos, qui son remplacées par une croix rouge et les IMG.
                            Ais-je oublié quelque chose.
                            L'adresse de mon site est : http://home.tele2.fr/art-et-creation

                            Merci à vous si vous pouvez eclairer ma lanterne.
                          2. boop
                            Bonjour,
                            Je viens de lire la réponse pour Lilas, moi aussi je travaille avec Nvu mais j'ai dû louper un étape. Ma page galerie est déjà faite (http://dansesophieberra.free.fr) mais j'aimerais dons maintenant que mes vignettes s'agrandissent au passage de la souris.Le code a ajouté au CSS c'est dans la page source de Nvu et le code dans mon html c'est la même page source? Je pêche grave sur ce coup là.Peux tu me ré-expliquer où chaque code doit être mis.Une fois que j'aurais fait ça je dois mettre toutes les URL de mes photos une par une?
                            Merci d'avance de ton aide
                            betty boop
                          3. Julien
                            @boopBonsoir,
                            pour Nvu, je ne m'y connais pas trop. Mais apparemment, si j'ai bien compris, la page source correspond à ton code html. Ta CSS, tu dois la créer dans un fichier CSS (outil, éditer une CSS..).
                            Bonne chance!
                            Julien
                          4. Julien
                            Bonsoir,

                            et merci Rad pour ton modèle de galerie avec mosaïque de vignette. J'ai tenté de reprendre ton modèle et ça marche bien sur Firefox.
                            Sur IE, j'ai encore un souci avec le hover, mais je vais bien arriver à contourner cette fâcheuse bizarrerie.

                            Cependant, pour répondre aux internautes qui ont encore du bas débit (et souhaitent garder ce type de connexion), j'aimerais installer des vignettes de taille réduite (sans réduction de taille automatique donc) et ne faire apparaître les images normales qu'à la demande. En gros donc, ce serait une galerie similaire à la tienne, mais avec deux docs image (image1.jpg et image1mini.jpg, image2.jpg etc) pour un téléchargement plus rapide des vignettes. Merci pour les conseils de tous,
                            Julien
                        2. lilas
                          Merci Rad!
                          Mais tu vas voir l'ampleur de mon ignorance : je ne trouve pas où modifier le CSS. Je ne crois pas en avoir utilisé dans mon site (nvu est bien fait mais n'explique pas les fonctionnements) alors comment est ce que je peux acceder au css?
                          Lilas
                          • 1
                          • 2
                          • 3