Faire apparaître une image au survol d'une autre image.

**apdf1** · 23/08/2019, 08h28

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

Invité · 23/08/2019, 15h34

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

**apdf1** · 23/08/2019, 17h50

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

Invité · 23/08/2019, 19h44

Envoyé par apdf1

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;
}

**apdf1** · 23/08/2019, 20h19

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é

Invité · 23/08/2019, 20h27

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'.

**apdf1** · 24/08/2019, 06h25

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

Invité · 24/08/2019, 08h35

Envoyé par apdf1

...je m'explique, ...

EXPLIQUER : c'est ce que tu DOIS faire dans le PREMIER message !!

Voilà... Je suis fâché...

**apdf1** · 24/08/2019, 09h08

Re,

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

J'ai bien expliquer non!!!

Max

Invité · 24/08/2019, 09h47

Miniatures et image :hover - JavaScript

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
}

**apdf1** · 24/08/2019, 13h53

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

Invité · 24/08/2019, 15h34

Il manque :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<!-- grande image -->
<div id="div-photo"></div>

**apdf1** · 24/08/2019, 15h59

Re,

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

Max

**apdf1** · 25/08/2019, 08h34

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

Invité · 25/08/2019, 13h24

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
}

**apdf1** · 25/08/2019, 14h35

Bonjour,

Là tu est d'excellent humeur

alors
là c'est Nickel je te remercie beaucoup et te souhaite un bon dimanche

Merci

Max

Faire apparaître une image au survol d'une autre image.

JavaScript

Discussions similaires

Partager

Partager