Améliorer une fonction js

**philippef** · 15/11/2014, 17h46

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 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
<?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>

**Watilin** · 16/11/2014, 02h55

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
  }
});

**philippef** · 16/11/2014, 10h53

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.

**Watilin** · 16/11/2014, 11h48

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**philippef** · 16/11/2014, 13h44

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

Code :

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
<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?

Améliorer une fonction js

JavaScript

Discussions similaires

Partager

Partager