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.


Css:
.nom_deputes {
width: 150px;
}
div.drap_depart {
display: none;
}
div.nom_deputes:hover .drap_depart {
display: block;
}
.departement {
position: absolute;
top: 420px;
left: 600px;
}

html:
<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:


<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

Bonjour,
J’ai bien peur que ce soit impossible sans le secours de Javascript : mais avec les évènements mouseOver et mouseOut ça ne devrait pas être trop difficile.
Quelque chose du genre :

<img id="img1"
onmouseover="document.getElementById('img2').style.display = block"
onmouseout="document.getElementById('img2').style.display = none">

Si tu n'as rien dans le premier tableau qui doit réagir a la souris (mis à part lr survol de ton image ) , pointer-events peut t'aider dans l'exemple que tu donnes:

table + table img {display:none;}
#tabl1 {pointer-events:none}
#tabl1 img {pointer-events:auto}
table#tabl1:hover + table img {display:block;}

demo : https://codepen.io/gc-nomade/pen/rNBjozg

Bonjour gcyrllus,

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 tableau 2 j'ai le blason du département qui correspond.
Je te remercie bonne journée

Max