[Résolu] Affichage photo pendant le survol

bonjour à tous,
je suis presque nul en progammation php et css, mais j'essaye beaucoup sans comprendre !!!!!!
il y a quelques mois, j'ai pu intégrer des sources css pour supprimer facilement des tableaux dans un site. Cela a fonctionné parfaitement et j'étais très content.
Mais comme d'habitude, j'ai voulu intégrer des suppléments dans un dossier, mais là catastrophe.
je voudrais que dans ce dossier, lorsque je passe le curseur de la souris sur une photo, une autre photo de même taille s'affiche et disparait dès que la souris change de place.
j'ai essayé avec les codes suivants:

css generiques
/* css alsacreations pour remplacement tableau */
.tableau header h1 { margin:10; text-align:center; line-height:10px; }
.tableau article { display:flex; margin-bottom:10px; height:250px; border:1px solid #ccc; }
.tableau article figure { margin:10px; height:100%; }
.tableau article:nth-child(odd) figure { order:2; }
.tableau article figure img{ height:90%; }
.tableau article .contenu { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.tableau article .contenu .contenu-texte { text-align:center; padding:10px; }
.tableau article .contenu .contenu-texte-1 { font-size: 11px; text-align:center; padding:10px; }
.tableau article .contenu .contenu-nom { font-style:italic; padding:10px; }
.tableau article:nth-child(odd) .contenu .contenu-nom { text-align:right; }
/*
et on rend facilement le tout responsive :
*/
@media (max-width: 768px) {
.tableau article { flex-direction:column; height:auto; }
.tableau article:nth-child(odd) figure { order:0; }
.tableau article figure img{ width:100%; }
.tableau article .contenu .contenu-texte { order:1; }
.tableau article .contenu .contenu-nom,.tableau article:nth-child(odd) .contenu .contenu-nom { text-align:center; }
}

code programme

<!-- ***************************************************************** -->
<div style="display: none;" id="pop1">
<!-- ***************************************************************** -->
<div class="conteneur2">
<p align="left" class="ferm_window">Cliquer sur la fenêtre pour la fermer </p>
<section class="tableau">
<header> <h1>test affichage photo</h1></header>
<!-- ************************************************************** -->
<article>
<figure>
<!-- -->
<a onmouseover="document.photo.src='images/test_1'"
onmouseout="document.photo.src='images/reseau-complet.png'"
href=href="http://cisalpin/trains/pages/module_ete/construction_module.php/" ><img src="images/test_1.jpg" name="photo"></a>
</figure>
<div class="contenu">
<div class="contenu-texte">test affichage photo<br>&nbsp;&nbsp; </div>
<div class="contenu-nom"><p style="text-align : left;"><em>&nbsp;plan module "ETE"&nbsp;</em></p> </div>
</div>
</article>
<article>
<div class="contenu">
<div class="contenu-texte-1">Un mélange de la ligne Lyon/Marseille le site d'exploitation. </div>
</div>
</article>
<!-- ***************************************************************** -->
<article>
<figure>
<a onmouseover="document.photo.src='images/test_2.jpg'"
onmouseout="document.photo.src='images/reseau-complet_2.png'"
href=href="http://cisalpin/trains/pages/module_ete/construction_module.php/" ><img src="images/test_2.jpg" name="photo"></a>
</figure>
<div class="contenu">
<div class="contenu-texte">Tracé du niveau 0 de la double voie</div>
<div class="contenu-nom"><p style="text-align : left;"><em>&nbsp;niveau 0&nbsp;</em></p></div>
</div>
</article>
<article>
<div class="contenu">
<div class="contenu-texte-1">La double voie (rouge) située au ra réalisée ultérieurement.</div>
</div>
</article>
<!-- ***************************************************************** -->


mon gros problème, ce système ne fonctionne que pour 1 fois, dès que je veux l'utiliser plusieurs fois, ça bloque

le résultat ok est visible à l'adresse : https://www.cisalpin.com/trains/pages/module_ete/construction_module_1.php
presser le bouton présentation

le résultat défectueux est visible à l'adresse : https://www.cisalpin.com/trains/pages/module_ete/construction_module.php
presser le bouton présentation

quelqu'un peut-il me dire si ce que j'envisage n'est pas réalisable d'une façon "simple" (le code css que j'ai introduit me facilite la vie et je voudrais le conserver).
J'ai cherché pas mal de solution offrant un affichage suite au survol de la souris, mais je n'ai rien trouvé de concret.

Mon but est de présenter des photos de la construction d'un réseau ferroviaire et, sur chaque page, en passant le curseur sur la photo, afficher l'aspect final de la construction.

merci d'avance aux spécialistes de leurs conseils
Modifié par helvetdulac (18 Mar 2018 - 16:06)