Améliorer une fonction js

Version imprimable

Bonjour,

Mon problème me parait assez simple mais je cale.
J'ai un tableau dans lequel j'ai 14 photos miniatures.
Au passage de la souris sur une photo j'affiche la photo en grand format et lorsque la souris quitte la photo miniature, je cache la grande.
je voudrais arriver à n'avoir qu'une ligne correspondant au grand format de n'importe quelle photo miniature.

Merci de m'aider

le code js :

Code:

1
2
3
4
5
6
function show(id){
	document.getElementById(id).style.display = "inline";
}
function hide(id){
	document.getElementById(id).style.display = "none";
}

mon code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$nom = "";
?>
<table border="1">
	<tr>
		<td><img src="images/photos_anciennes/bailly_pm.jpg" alt="" <?php $nom='bailly_gm.jpg'; ?> style="cursor:pointer" onmouseover="javascript:show('1');" onmouseout="javascript:hide('1');"></td>
		<td><img src="images/photos_anciennes/la_gare_pm.jpg" alt="" <?php $nom='la_gare_gm.jpg'; ?> style="cursor:pointer" onmouseover="javascript:show('2');" onmouseout="javascript:hide('2');"></td>
		<td><img src="images/photos_anciennes/chateau_pm.jpg" alt="" style="cursor:pointer" onmouseover="javascript:show('3');" onmouseout="javascript:hide('3');"></td>
	</tr>
...
</table>
<!-- les photos en grand format -->
<div>
	<img src="images/photos_anciennes/<?php echo $nom; ?>" alt="" id="1" style="display:none">
	<img src="images/photos_anciennes/<?php echo $nom; ?>" alt="" id="2" style="display:none"">
	<img src="images/photos_anciennes/chateau_gm.jpg" alt="" id="3" style="display:none">
</div>

Bonsoir,

tu peux utiliser les attributs data-* et accéder à this dans les onmouseover et onmouseout.

Note au passage : ce n'est pas recommandé d'utiliser des ids qui commencent par des chiffres. Je les ai laissés mais tu devras les changer.

Code:

1
2
3
<td><img src="images/photos_anciennes/bailly_pm.jpg" alt="" data-grand-format="1" style="cursor:pointer" onmouseover="show(this.dataset.grandFormat);" onmouseout="hide(this.dataset.grandFormat);"></td>
<td><img src="images/photos_anciennes/la_gare_pm.jpg" alt="" data-grand-format="2" style="cursor:pointer" onmouseover="show(this.dataset.grandFormat);" onmouseout="hide(this.dataset.grandFormat);"></td>
<td><img src="images/photos_anciennes/chateau_pm.jpg" alt="" data-grand-format="3" style="cursor:pointer" onmouseover="show(this.dataset.grandFormat);" onmouseout="hide(this.dataset.grandFormat);"></td>

Mieux, tu délègues la gestion des évènements à un élément parent (la <table> est un bon candidat) comme ça tu n'as plus de code JS dans ton HTML :

Code:

1
2
3
4
5
6
7
8
9
<table id="petits-formats">
  <tbody>
    <tr>
      <td><img src="images/photos_anciennes/bailly_pm.jpg"  alt="" data-grand-format="1"></td>
      <td><img src="images/photos_anciennes/la_gare_pm.jpg" alt="" data-grand-format="2"></td>
      <td><img src="images/photos_anciennes/chateau_pm.jpg" alt="" data-grand-format="3"></td>
    </tr>
  </tbody>
</table>

J'en ai profité pour extraire le cursor: pointer également.

Code:

1
2
3
4
5
6
<!-- dans le <head> -->
<style>
#petits-formats img {
    cursor: pointer;
}
</style>

Code:

1
2
3
4
5
6
7
8
9
10
document.getElementById("petits-formats").addEventListener("mouseover", function(event) {
  if (event.target.tagName === "IMG") {
    show(this.dataset.grandFormat);
  }
});
document.getElementById("petits-formats").addEventListener("mouseout", function(event) {
  if (event.target.tagName === "IMG") {
    hide(this.dataset.grandFormat);
  }
});

16/11/2014, 10h53
philippef

Bonjour,
et merci pour ce code beaucoup plus simple que ce que j'imaginais.
Cependant lorsque la souris passe sur les photos en petit format rien ne se passe.
Ce que je ne comprends pas c'est qu'apparemment la fonction js n'est pas appelée.
Les fonctions js sont dans un fichier scripts.js.

Merci pour l'aide.
16/11/2014, 11h48
Watilin
As-tu lié le fichier avant ou après la table ? Il faut que la table existe au moment où le script s'exécute. As-tu un message d'erreur dans la console (F12) ?

L'évènement DOMContentLoaded te permet de retarder l'exécution de ton code jusqu'à ce que le DOM soit prêt.
Code:

1 2 3 4 5 document.addEventListener("DOMContentLoaded", function() { // ... code à exécuter });

Le fichier script est inclus dans le fichier index.
voici la structure du site :
fichier index.php dans lequel il y a
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="scripts/scripts.js"></script> </head> <body> <div id="bandeau"> le code </div> <div id="menu"> les liens </div> <div id="contenu"> <?php switch($page){ les pages à afficher dont la page photos.php qui contient les photos ?> </div> </body> </html>
Pour le moment je n'utilise javascript que dans la page photos.php.
Est que je dois placer javascript seulement après la table ?
Que se passera t il si jai besoin de javascript dans une autre page?