Discussion :

[apdf1]

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é]

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]

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é]

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]

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é]

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