Ayant commencé les cours d'une LP en développement web début septembre, j'ai pu constater mon niveau pathétique en JS ( et Ajax ).
Pendant ma période en entreprise fin août, l'IUT nous a envoyé des ressources HTML / CSS / JS pour nous entraîner, ce que j'ai donc décider de faire.
Cependant, sur un des exercices, on nous demande d'utiliser les data-image qu'ont chacune des images du fichier html pour faire en sorte de les faire apparaitre (comme si on retournait une carte) quand la sourie passe dessus et ainsi changer la src sauf que rien ne change. On me demande aussi que la légende s'affiche de nouveau quand la souris passe sur l'image mais je préfère le faire après.
Voici mon code pour comprendre :
HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="description" content="Premiers exercices pour s'entrainer aux bases de javascript et notamment mettre en place plusieurs écouteurs sur une collection d'objets" />
<title>Mise en place de plusieurs écouteurs sur une collection | S2 - Javascript Bases</title>
<link rel="stylesheet" href="./css/exercice3_4.css" type="text/css" />
</head>
<body>
<header>
<img src="images/logo.png" alt="logo" />
<h1>QUEL POISSON SE CACHE DERRIERE CHAQUE IMAGE MYSTERE ?</h1>
</header>
<main>
<div id="galerie">
<figure>
<img src="images/poisson1.jpg" alt="poisson avec 3 yeux" data-image="images/poisson1.jpg" />
<figcaption>Poisson voyant</figcaption>
</figure>
<figure>
<img src="images/poisson2.jpg" alt="poisson requin" data-image="images/poisson2.jpg" />
<figcaption>Poisson requin</figcaption>
</figure>
<figure>
<img src="images/poisson3.jpg" alt="poisson avec des lunettes" data-image="images/poisson3.jpg" />
<figcaption>Poisson myope</figcaption>
</figure>
<figure>
<img src="images/poisson4.jpg" alt="poisson avec une coiffure banane" data-image="images/poisson4.jpg" />
<figcaption>Poisson rock</figcaption>
</figure>
<figure>
<img src="images/poisson5.jpg" alt="poisson philosophe" data-image="images/poisson5.jpg" />
<figcaption>Poisson Socrate</figcaption>
</figure>
</div>
</main>
<script type = "text/javascript" src="js/exercice3.js"></script>
</body>
</html>
JS :
"use strict"; /* oblige à déclarer toute variable utilisée */
document.addEventListener("DOMContentLoaded",initialiser) ;
function initialiser(evt) {
let imageDeDos = document.querySelectorAll('div#galerie img');
let img = img.getAttribute('data-image');
let legendes = document.getElementsByTagName('figcaption');
for(let legende of legendes){
legende.style.visibility = "hidden";
}
for(let imageDos of imageDeDos){
imageDos.src="images/imgDos.jpg"
imageDos.addEventListener('mouseenter', () => {
this.src=imageDeDos.dataset.image;
})
imageDos.addEventListener('mouseleave', () => {
imageDos.src="images/imgDos.jpg";
})
}
Quelqu'un pourrait-il m'expliquer comment faire et ce que je fais mal ? Merci d'avance et bonne journée à vous,
déjà, est-ce que la première partie fonctionne : est-ce que tes images sont bien remplacées par "imgDos.jpg" ? De visu, sans tester, ton JS me paraît très bien, propre, utilisant les écouteurs - sauf que tu ne fermes pas ta méthode "initialiser". Une bonne indentation évite ce genre d'étourderie. As-tu une erreur dans la console au chargement de la page ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Effectivement, j'ai mal copier coller mais dans mon code, la méthode initialiser est bien fermée, j'ai juste mal copier coller. Ensuite, oui les images sont bien remplacées !
Je n'ai aucune erreur dans ma console, c'est pour ça que je ne comprends pas le problème de mon code et que je me pose vraiment des questions vis à vis de mon niveau, c'est très frustrant de ne pas comprendre et trouvé après avoir cherché longtemps.
Lignes 23 et 27, je crois que plutôt que this et imageDos, ça devrait être event.target (en mettant bien event en paramètre des fonctions fléchées). "this" ne se comporte pas de la même manière quand on est 1) dans un eventListener, 2) dans une fonction fléchée
Mais par curiosité, si tu fais un console.log(this) avant la ligne 23, ça donne quoi ?
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Oulah, avant même de changer les lignes 23 et 27, maintenant j'ai une erreur qui me dis que mon image dans "imageDeDos.dataset.image" n'est pas défini alors que cette erreur n'était pas là hier..
Et quand je fais le console log, ça me donne dans la console le document et non l'image en fait.. Je suis pas sûr de comprendre pourquoi
Quand je fais le console.log(evt.target), il me donne bien l'image, seulement j'ai l'impression que le mouseenter ne fonctionne pas car ça ne s'affiche dans la console seulement quand je clique..
J'ai essayé de faire des modifications de mon côté pour tester des choses mais j'avoue que là, je ne vois absolument pas quoi changer pour que ça fonctionne.
"use strict"; /* oblige à déclarer toute variable utilisée */
document.addEventListener("DOMContentLoaded",initialiser) ;
function initialiser(evt) {
let imageDeDos = document.querySelectorAll('div#galerie img');
let legendes = document.getElementsByTagName('figcaption');
for(let legende of legendes){
legende.style.visibility = "hidden";
}
for(let imageDos of imageDeDos){
let dataImage = document.querySelectorAll('data-image');
imageDos.src="images/imgDos.jpg";
imageDos.addEventListener('mouseenter', (evt) => {
console.log(evt.target);
evt.target.src=dataImage.dataset.image;
})
imageDos.addEventListener('mouseleave', (evt) => {
evt.target.src="images/imgDos.jpg";
})
}
}
J'avoue que je ne comprends pas pour le mouseenter, teste éventuellement avec un événement click dans un premier temps ? Par contre, la ligne 25, pour moi ça devrait être evt.target.dataset.image (je n'avais pas vu ça dans ton premier code, pardon). La variable dataImage ne sert à rien : tout est dans l'élément survolé, l'image.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
En effet, c'était a cause de la ligne 25 ! Merci beaucoup pour ton aide, vraiment !
Je n'ai plus qu'à m'occuper de la légende qui doit apparaitre et disparaitre en même temps que l'image.
Encore merci !
JS - utiliser data-attribut
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Pas d'aide concernant le code par MP, le forum est là pour ça :)