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

  1. #1
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut Faire apparaître une image au survol d'une autre image.
    Bonjour,

    Pour faire apparaître une image au survol d'une autre image avec deux Div il n'y à pas de problème.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .nom_deputes {
    	width: 150px;
    }
    div.drap_depart {
    	display: none;
    }
    div.nom_deputes:hover .drap_depart {
    	display: block;
    }
    .departement {
    	position: absolute;
    	top: 420px;
    	left: 600px;
    }
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <div class="nom_deputes">
    	<img src="../deputes/Barbara%20Pompili.jpg">
    	<div class="drap_depart">
    		<img class="departement" src="..//blasons_departements/01-Ain.png" width="100" height="130">
    	</div>
    </div>

    Mon problème est que j'ai deux tableaux "tabl1 et tabl2"et je n'arrive pas ?

    Mes images provienne du même dossier et mon code tableau est 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
    <table border="2" id="tabl1">
    	<tr>
    		<td>Barbara Pompili</td>
    	</tr>
    	<tr>
    		<td><!--1er image-->
    			<img src="../deputes/Barbara%20Pompili.jpg">
    		</td>
    	</tr>
    	<tr>
    		<td>Bla, bla,Bla, bla,Bla, bla,Bla, bla,Bla, bla,</td>
    	</tr>
    	<tr>
    		<tr>
    			<td>Bla, bla,Bla, bla,Bla, bla,Bla, bla,Bla, bla,</td>
    		</tr>
    </table>
     
    <table border="1" class="tabl2" >
    	<tr>
    		<td>Bla, bla,Bla, bla,Bla, bla,Bla, bla,Bla, bla,</td>
    	</tr>
    	<tr>
    		<td>Bla, bla,Bla, bla,Bla, bla,Bla, bla,Bla, bla,</td>
    	</tr>
    	<tr><!--2èmeimage qui devrait être ici au passagfe de la souris de la premiere image-->
                  <!-- <img class="departement" src="..//blasons_departements/01-Ain.png" width="100" height="130">-->
    		<td class="drap">
    		</td>
    	</tr>
    </table>

    Je vous remercie

    Max

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Bonjour,

    Ce n'est pas possible en CSS dans ce cas de figure.
    Il faut utiliser JavaScript.

    De plus, la question a déjà été posée 1000 fois.
    Merci de faire une recherche
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Bonjour,

    Je veut bien croire que ces pas possible en Css mais en javascript.

    Mais quand tu dis

    De plus, la question a déjà été posée 1000 fois.
    J'ai chercher dans le site et je n'est rien trouver ou alors je suis un anne.

    Max

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    Je veut bien croire que ces pas possible en Css mais en javascript.
    ...
    J'ai chercher dans le site et je n'est rien trouver ou alors je suis un anne.
    Euhh... Je ne sais pas si tu es un âne, mais tu mériterais de porter le bonnet (d'âne) !...

    Une solution (en ajoutant/supprimant une classe) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <img src="........................" alt="..."
       onmouseover="document.getElementById('image-cible').classList.add('show');" 
       onmouseout="document.getElementById('image-cible').classList.remove('show');" />
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <img src="........................" alt="..." id="image-cible" />
    N.B. un id est toujours UNIQUE.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #image-cible {
      display:none;
    }
    #image-cible.show {
      display:block;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Bonjour

    Oui sa fonctionne très bien.Comme aujourd’hui on dirait que tu est de bonne humeur alors je vais profiter.

    1 question j'ai 577 images dans mon tableau es-que je doit mettre ceci:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <td><img src="../deputes/Barbara%20Pompili.jpg" alt="Barbara Pompili"
       onmouseover="document.getElementById('image-cible').classList.add('show');" 
       onmouseout="document.getElementById('image-cible').classList.remove('show');" />
    à tous les <TD> ou j'ai une image ou il y a une autre façon?

    Merci et bonne soiré

  6. #6
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Comme je l'ai écrit :
    un id est toujours UNIQUE.
    Donc, il te faudra 277 ids : 'image-cible-1', 'image-cible-2',.......,'image-cible-277'.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  7. #7
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Bonjour

    Je te remercie mais cela est plus compliquer je m'explique, dans le premier tableau je met les photos de tous les députés "577"et lorsque je passe dessus sur une photo je voudrais que dans le tableau2 j'ai le blason du département qui correspond.
    Mon problème dans le tableau2 quel code je doit mettre??
    Je te remercie bonne journée

    Max

  8. #8
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Citation Envoyé par apdf1 Voir le message
    ...je m'explique, ...
    EXPLIQUER : c'est ce que tu DOIS faire dans le PREMIER message !!


    Voilà... Je suis fâché...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  9. #9
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Re,

    Bon si tu est fâché alors...

    J'ai bien expliquer non!!!

    Max

  10. #10
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut

    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
     
          <img src="https://image.flaticon.com/icons/svg/1089/1089083.svg" onmouseover="ShowBigImage('div-photo','https://image.flaticon.com/icons/svg/1089/1089083.svg');" onmouseout="HideBigImage('div-photo');" alt="" />
    ...
          <img src="https://image.flaticon.com/icons/svg/1089/1089114.svg" onmouseover="ShowBigImage('div-photo','https://image.flaticon.com/icons/svg/1089/1089114.svg');" onmouseout="HideBigImage('div-photo');" alt="" />
    ...
          <img src="https://image.flaticon.com/icons/svg/1089/1089101.svg" onmouseover="ShowBigImage('div-photo','https://image.flaticon.com/icons/svg/1089/1089101.svg');" onmouseout="HideBigImage('div-photo');" alt="" />
    ...
          <img src="https://image.flaticon.com/icons/svg/1089/1089124.svg" onmouseover="ShowBigImage('div-photo','https://image.flaticon.com/icons/svg/1089/1089124.svg');" onmouseout="HideBigImage('div-photo');" alt="" />
    ...
          <img src="https://image.flaticon.com/icons/svg/1089/1089093.svg" onmouseover="ShowBigImage('div-photo','https://image.flaticon.com/icons/svg/1089/1089093.svg');" onmouseout="HideBigImage('div-photo');" alt="" />
    ...
     
    <!-- grande image -->
    <div id="div-photo"></div>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    'use strict';
    // fonction : affichage d'une image dans un div
    function ShowBigImage(divId,imageRepNom){
      // divId : id du div qui va contenir la grande image
      // imageNom : chemin + nom de la grande image
      // on met l'image dans le div
      document.getElementById(divId).innerHTML = '<img src="'+imageRepNom+'" alt="" />';
    }	
    // fonction : vidage du contenu d'un div
    function HideBigImage(divId){
      // divId : id du div à vider
      document.getElementById(divId).innerHTML = ''; // on vide le div
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  11. #11
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Re,

    A tu vois, quand tu veux tu peut être sympathique et pas trop critique

    Bon juste une petite chose, le code Nickel!

    Pour le mettre dans un tableau j'ai fait comme ceci

    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    #div-photo { position:absolute; top: 250px;left: 950px; float:left; max-width:100px; }
    #div-photo img { cursor:pointer; max-width:100%; } /* grande image */

    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
    <div id="div-pictos">
      <table border="1">
        <tr>
            <td><img src="Bérengère Poletti.jpg" onmouseover="ShowBigImage('div-photo','01-Ain.png');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
            <tr>
            <td><img src="Maud Petit.jpg" onmouseover="ShowBigImage('div-photo','06-Alpes_Maritimes.png');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
            <tr>
            <td><img src="Ramlati Ali.jpg" onmouseover="ShowBigImage('div-photo','57-Moselle.png');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
     
      </table>
    </div>

    Je voulais savoir si cela était bon ou pas.

    Je te remercie

    Max

  12. #12
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Il manque :
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <!-- grande image -->
    <div id="div-photo"></div>
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  13. #13
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Re,

    Oui je l'avais mis
    Je te remercie et te souhaite une bonne après-midi

    Max

  14. #14
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Bonjour jreaux62

    Avant que tu devienne désagréable alors que là tu pourrais!
    j'ai juste une petite chose à te demander pour finaliser mon code est-il possible d'ajouter un texte au-dessus de l'image qui est onmouseover
    j'ai chercher la moities de la nuit je ne suis pas arriver en JavaScript.

    Je m'excuse et te remercie

    Max

  15. #15
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 366
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 366
    Points : 31 366
    Points
    31 366
    Par défaut
    Bonjour,

    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
    <div id="div-pictos">
      <table border="1">
        <tr>
            <td><img src="Bérengère Poletti.jpg" onmouseover="ShowBigImage('div-photo','01-Ain.png', 'Ain');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
            <tr>
            <td><img src="Maud Petit.jpg" onmouseover="ShowBigImage('div-photo','06-Alpes_Maritimes.png', 'Alpes-Maritimes');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
            <tr>
            <td><img src="Ramlati Ali.jpg" onmouseover="ShowBigImage('div-photo','57-Moselle.png', 'Moselle');" onmouseout="HideBigImage('div-photo');" alt="" /></td>
        </tr>
     
      </table>
    </div>
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <!-- grande image -->
    <figure>
      <figcaption id="div-photo-legende"></figcaption>
      <div id="div-photo"></div>
    </figure>

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    'use strict';
    // fonction : affichage d'une image dans un div
    function ShowBigImage(divId,imageRepNom,imageLegende){
      // divId : id du div qui va contenir la grande image
      // imageNom : chemin + nom de la grande image
      // on met l'image dans le div
      document.getElementById(divId).innerHTML = '<img src="'+imageRepNom+'" alt="" />';
      document.getElementById(divId+'-legende').textContent = imageLegende;
    }	
    // fonction : vidage du contenu d'un div
    function HideBigImage(divId){
      // divId : id du div à vider
      document.getElementById(divId).innerHTML = ''; // on vide le div
      document.getElementById(divId+'-legende').textContent = ''; // on vide le div
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  16. #16
    Membre du Club
    Inscrit en
    septembre 2008
    Messages
    615
    Détails du profil
    Informations forums :
    Inscription : septembre 2008
    Messages : 615
    Points : 45
    Points
    45
    Par défaut
    Bonjour,

    Là tu est d'excellent humeur alors
    là c'est Nickel je te remercie beaucoup et te souhaite un bon dimanche

    Merci

    Max

Discussions similaires

  1. [CSS 3] Faire apparaître un texte au survol d'une image
    Par Green7497 dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 18/01/2017, 18h51
  2. Réponses: 4
    Dernier message: 13/01/2013, 01h00
  3. faire apparaître une image au survol d'un texte
    Par laurentSc dans le forum Général JavaScript
    Réponses: 10
    Dernier message: 02/11/2012, 14h21
  4. Réponses: 1
    Dernier message: 31/07/2008, 14h30
  5. Réponses: 9
    Dernier message: 03/08/2007, 13h54

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