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
    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
    Invité
    Invité(e)
    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

  3. #3
    Membre du Club
    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
    Invité
    Invité(e)
    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;
    }

  5. #5
    Membre du Club
    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
    Invité
    Invité(e)
    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'.

  7. #7
    Membre du Club
    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
    Invité
    Invité(e)
    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é...

  9. #9
    Membre du Club
    Re,

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

    J'ai bien expliquer non!!!

    Max

  10. #10
    Invité
    Invité(e)

    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
    }

  11. #11
    Membre du Club
    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
    Invité
    Invité(e)
    Il manque :
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    <!-- grande image -->
    <div id="div-photo"></div>

  13. #13
    Membre du Club
    Re,

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

    Max

  14. #14
    Membre du Club
    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
    Invité
    Invité(e)
    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
    }

  16. #16
    Membre du Club
    Bonjour,

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

    Merci

    Max