IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

:hover pour image et titre différent


Sujet :

Survol d'un élément en CSS (:hover)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    107
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 107
    Par défaut :hover pour image et titre différent
    Bonjour,

    J'ai conçu une galerie de photos sur mon site avec l'aide de:

    http://plambert.developpez.com/tutor...mage-vignette/

    et ça fonctionne très bien. (merci à l'auteure)

    Maintenant je souhaiterais ajouter, en dessous de chaque photo zoomée, un commentaire texte, différent pour chaque photo.

    J'ai fait de nombreuses recherches dans ce sens, mais je n'ai rien trouvé de spécifique.

    Auriez-vous une piste ?

    merci

  2. #2
    Membre émérite Avatar de cadoudal56
    Profil pro
    Inscrit en
    Février 2005
    Messages
    694
    Détails du profil
    Informations personnelles :
    Âge : 53
    Localisation : France

    Informations professionnelles :
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Février 2005
    Messages : 694
    Par défaut
    Bonjour,

    C'est faisable, mais tu ne trouveras pas de réponse dans cette section du Forum. A mon humble avis cela passera par de l'utilisation de Javascript et il faudrais donc placer ta question dans le sous forum ad hoc.

    @+

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    Citation Envoyé par carjo
    Maintenant je souhaiterais ajouter, en dessous de chaque photo zoomée, un commentaire texte, différent pour chaque photo.
    il te faut changer la structure de la page en mettant ton image agrandie dans un conteneur avec le texte à afficher.
    C'est sur se conteneur qu'il te faudra jouer en l'affichant/cachant.

    Comme le code est ancien, IE ne supportait pas le hover sur autre chose que des balises A, tu peux le dépoussiérer mais le principe reste le même.

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    107
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 107
    Par défaut
    J'ai tenté de faire comme ça, mais ça n'a pas fonctionné. À la suite de plusieurs recherches, je n'ai également rien trouvé qui puisse m'aider.

    Auriez-vous un exemple ou un tuto précisément à ce sujet ?

    Merci!

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    À la suite de plusieurs recherches, je...
    je ne penses pas que tu ais bien forcé

    D'après l'exemple du tuto cela pourrais donner ceci
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <base href="http://plambert.developpez.com/tutoriel/css/zoomer-image-vignette/fichiers/">
    <!-- Date de création: 07/02/06 -->
    <title>CSS Debutant : Zoom d'images façon thumbnail (vignettes) en CSS - Méthode 2</title>
    <style type="text/css">
    body {
      background-color:black;
      color:white;
    }
    #galerie{
      position:relative;
      margin:0;
      padding:0;
    }
    #galerie img{
      border:1px solid black;
    }
    #galerie li {
      margin:0;
      padding:0;
      text-decoration:none;
      float:left;
    }
    #galerie p{
      text-align:center;
    }
    #galerie li div.grand{
      display:none;
      position:absolute;
      text-align:center;
      top:80px;
      left:0px;
      width:306px; /* pour tenir compte des bordures */
    }
    #galerie li:hover div.grand{
      display:block;
    }
    </style>
    </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">
      <ul id="galerie">
        <li>
          <img src="100_inachis-io.jpg" alt="miniature Inachis-Io">
          <div class="grand">
            <img src="300_inachis-io.jpg" alt="Inachis-io">
            <p>Un peu de texte sous l'image</p>
          </div>
        </li>
        <li>
          <img src="100_machaon.jpg" alt="miniature Machaon">
          <div class="grand">
            <img src="300_machaon.jpg" alt="Machaon" class="grand">
            <p>Ceci est la deuxième image</p>
          </div>
        </li>
        <li>
          <img src="100_polyommatus-icarus.jpg" alt="miniature Polyommatus-icarus">
          <div class="grand">
            <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-Icarus">
            <p>Magnifque espéce de Polyommatus-Icarus</p>
          </div>
        </li>
      </ul>
    </div>
    </body>
    </html>

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    107
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 107
    Par défaut
    J'ai forcé, mais sans doute de la mauvaise façon.(!)
    Merci pour votre support.

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

Discussions similaires

  1. plusieurs titres pour images
    Par soforan dans le forum Interfaces Graphiques
    Réponses: 4
    Dernier message: 17/05/2008, 13h15
  2. CSS Alignement vertical pour images dynamiques
    Par bébé dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 17/09/2005, 15h43
  3. Champ BLOB pour IMAGE format JPG and TImage et Interbase
    Par alain_bastien dans le forum InterBase
    Réponses: 1
    Dernier message: 20/10/2004, 16h15
  4. [apache] alias pour images
    Par romuald9999 dans le forum Apache
    Réponses: 2
    Dernier message: 13/08/2004, 09h44
  5. recherche des algorythmes pour images 2d
    Par exxos dans le forum Algorithmes et structures de données
    Réponses: 3
    Dernier message: 24/05/2002, 13h46

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