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

Version imprimable

Bonjour,

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

Code:

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:

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:

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

23/08/2019, 15h34
Invité

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 :recherch:
23/08/2019, 17h50
apdf1

Bonjour,

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

Mais quand tu dis

Citation:

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

Citation:

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:

1 2 3 <img src="........................" alt="..." onmouseover="document.getElementById('image-cible').classList.add('show');" onmouseout="document.getElementById('image-cible').classList.remove('show');" />
Code:

<img src="........................" alt="..." id="image-cible" />

N.B. un id est toujours UNIQUE.
Code:

1 2 3 4 5 6 #image-cible { display:none; } #image-cible.show { display:block; }

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:

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é

23/08/2019, 20h27
Invité

Comme je l'ai écrit :

Citation:

un id est toujours UNIQUE.

Donc, il te faudra 277 ids : 'image-cible-1', 'image-cible-2',.......,'image-cible-277'.
24/08/2019, 06h25
apdf1

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
24/08/2019, 08h35
Invité

Citation:

Envoyé par apdf1

...je m'explique, ...

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

:fessee: Voilà... Je suis fâché...
24/08/2019, 09h08
apdf1

Re,

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

J'ai bien expliquer non!!!

Max

Miniatures et image :hover - JavaScript

Code:

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:

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
}

Re,

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

Bon juste une petite chose, le code Nickel!

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

Code:

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:

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

Il manque :

Code:

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

24/08/2019, 15h59
apdf1

Re,

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

Max
25/08/2019, 08h34
apdf1

Bonjour jreaux62

Avant que tu devienne désagréable alors que là tu pourrais!:ptdr:
j'ai juste une petite chose à te demander pour finaliser mon code :P 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

Bonjour,

Code:

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:

1
2
3
4
5
<!-- grande image -->
<figure>
  <figcaption id="div-photo-legende"></figcaption>
  <div id="div-photo"></div>
</figure>

Code:

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
}

25/08/2019, 14h35
apdf1

Bonjour,

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

Merci

Max