1. #1
    Membre à l'essai
    Femme Profil pro
    Inscrit en
    mai 2011
    Messages
    30
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France

    Informations forums :
    Inscription : mai 2011
    Messages : 30
    Points : 21
    Points
    21

    Par défaut Comment réaliser une galerie photo avec photo qui s'affiche au survol à un autre endroit

    Bonjour tout le monde,

    J'espère que vous allez pouvoir m'aider sur mon problème.
    Je suis entrain de créer un site web. Avec mes quelques notions en HTML, j'ai pu créer le fond ..
    Mais le problème c'est qu'il me manque un élément crucial !!!
    Une "espèce de galerie photo". Je voudrais réaliser une petite galerie photo 3 lignes / 3 colonnes.
    Et en passant sur ces photo je voudrais l'agrandissement qui s'effectue sur le côté opposé !
    Seulement, je n'arrive pas à réaliser l'agrandissement, ou même la galerie (tentative par un tableau : ECHOUE).
    Vous trouverez en pièce jointe, ce que je veux, mais en image. Si vous avez besoin du moindre fichier, n'hésitez pas !

    MERCI BEAUCOUP !
    En espérant avoir votre aide ..
    Images attachées Images attachées  

  2. #2
    Membre émérite

    Homme Profil pro
    Webmaster débutant
    Inscrit en
    octobre 2006
    Messages
    5 846
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webmaster débutant
    Secteur : Industrie

    Informations forums :
    Inscription : octobre 2006
    Messages : 5 846
    Points : 2 520
    Points
    2 520
    Billets dans le blog
    1

    Par défaut

    Tu devrais pouvoir t'inspirer de ce qui est visible ici. Pour faire disparaître la photo agrandie, la survoler.
    Code de cet exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <style>.popup_anchor div.popup{visibility: hidden;
    z-index: 10;
    top: 120px;
    left: 100px;
    position: absolute;
    background-color:white;
    border-color:black;
    }
    span:hover.popup_anchor div.popup{
    visibility: visible;
    }
    span .popup_anchor div:hover.popup{
    visibility: visible;
    }
    </style>
    <span
     onmouseover="document.getElementById('popupid').style.visibility = 'visible';"><span
     class="popup_anchor"><b><img
     src="chevaux2008_01010.jpg" chevaux2008=""></b><span
     onmouseout="document.getElementById('popupid').style.visibility = 'hidden';">
    <div class="popup" id="popupid"><span><img
     src="chevaux2008_010.jpg"></span><br>
    </div>
    </span></span></span>
    Pour plusieurs photos, modifier les identifiants "popup_anchor" et "popupid".
    Il vaut mieux viser la perfection et la manquer que viser l'imperfection et l'atteindre. - Bertrand Russell

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    novembre 2006
    Messages
    60
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2006
    Messages : 60
    Points : 63
    Points
    63

    Par défaut

    Trouvé sur ce site même:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr"><head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     
    <!-- Date de création: 07/02/06 -->
     
    <title>CSS Debutant : Zoom d'images (vignettes) en CSS - Méthode 2</title>	 
    <style type="text/css"> 
    <!--  
    body {
    background-color:black; 
    color:white;
    height:500px; /*afin d'avoir un ascenceur horizontal pour de faibles résolution d'écran*/
    }
    img {border:1px solid black;}   
     
    .thumb {
    position:relative; 
    top:0;
    left:300px; /*edited from 0 to left: 300px; to center list of thumbs*/
    }
    .thumb a {
    margin: 0; 
    text-decoration:none;
    }
     
    .thumb a:hover {
    background-color:black; /*indispensable, sinon, pas de zoom */
    }
     
    .thumb a .grand {
    display:block;
    position:absolute; 
    width:0px; 
    }
    .thumb a:hover .grand { 
    position:absolute; 
    top:120px;  /* edited to 120 from 8opx */
    left:125px; /* edited to 125 from opx, to center pict */
    width:300px; /* not edited eventhough not actual size */
    height:225px; /* not edited eventhough not actual size */
    }
     -->
    </style>
    <meta name="description" content="Deuxième exemple de zoom de vignettes  uniquement avec le langage CSS"/>
    </head><body>	
    <h1>Zoom d'images façon thumbnail - Méthode 2 -</h1>
    <p>Passer le curseur de la souris sur les miniatures pour voir les photos en grand</p>
     
    <div class="thumb">
    <a href="#"><img src="CssHovPic/aS.gif" alt="miniature a.gif"/>
    <img src="CssHovPic/a.gif" alt="a.gif full size" class="grand"/>
    </a>
    <a href="#">
    <img src="CssHovPic/bS.gif" alt="miniature b.gif"/>
    <img src="CssHovPic/b.gif" alt="b.gif full size" class="grand"/>
    </a>
    <a href="#">
    <img src="CssHovPic/cS.gif" alt="miniature c.gif"/>
    <img src="CssHovPic/c.gif" alt="c.gif full size" class="grand"/>
    </a>
    <a href="#"><img src="CssHovPic/dS.gif" alt="miniature d.gif"/>
    <img src="CssHovPic/d.gif" alt="d.gif full size" class="grand"/>
    </a>
    <a href="#">
    <img src="CssHovPic/eS.gif" alt="miniature e.gif"/>
     
    <img src="CssHovPic/e.gif" alt="e.gif full size" class="grand"/>
    </a>
    <a href="#">
    <img src="CssHovPic/fS.gif" alt="miniature f.gif"/>
    <img src="CssHovPic/f.gif" alt="f.gif full size" class="grand"/>
    </a>
    </div>
    <div style="margin-top: 250px; text-align: center;">
    <hr/>
    <a href="index.php">Retour à la page d'accueil</a>
    <p>sample out of site developpez.com Css only. pict resized with animationshop by SA, but it seems you can get away from the resizing bit. This has been validated with W3C in XHTML 1.0 Strict</p>
     
    <p>Used size: 4 small = 100 x 100, larger = 250 x 250- not edited in thumb hover grand, kept the 300 x 225px, but edited in .thumb a:hover .grand { A = the top to 120px from 80px,and B = the left to 125 from 0, and switched charset to UTF-8 from ISO, also edited .thumb left to 300p from 0px - no further edit made- Added 3 more pict to the original 3, and moved them all to a specific directory out of the root</p>
    </div>
     
    </body></html>
    et je l'ai un peu édité, pour avoir 6 images et pour justement, déplacer un peu l'endroit ou se place limage aggrandie.
    Ça fonctionne très bien.

    Malheureusement, je n'arrive pas à retrouver la source sur "developpez"...cependant j'ai retrouvé ça:

    http://css.developpez.com/galerie/?p...#galerie-image ce qui donne:

    http://css.developpez.com/galerie/de...alerie-images/

    qui resemble pas mal à ce que je t'ai donné en exemple.
    bye,

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [OpenOffice][Tableur] Comment réaliser une liste déroulante avec des images
    Par flexi2202 dans le forum OpenOffice & LibreOffice
    Réponses: 0
    Dernier message: 30/04/2015, 10h34
  2. Réponses: 0
    Dernier message: 31/10/2007, 14h05
  3. comment peut-on réaliser une communication usb avec un MC moto ?
    Par Super2006 dans le forum Périphériques
    Réponses: 10
    Dernier message: 25/03/2007, 22h38
  4. VBA-E Comment réaliser une recherche avec plusieurs critères ?
    Par Larsen21 dans le forum Macros et VBA Excel
    Réponses: 11
    Dernier message: 14/12/2006, 13h43
  5. Réaliser une galerie photo automatique sans php
    Par vallica dans le forum JavaScript
    Réponses: 2
    Dernier message: 01/10/2006, 10h57

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo