Mouseover, mouseout
Fermé
MI7QC
Messages postés
2
Date d'inscription
samedi 5 octobre 2019
Statut
Membre
Dernière intervention
7 octobre 2019
-
Modifié le 5 oct. 2019 à 22:20
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 7 oct. 2019 à 17:14
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 - 7 oct. 2019 à 17:14
A voir également:
- Mouseout js
- Js/adware.agent.cr ✓ - Forum Virus
- Node js virus ✓ - Forum Virus
- Retour à la ligne js ✓ - Forum Javascript
- Js/agent.piv ✓ - Forum Virus
- Onclick js ✓ - Forum Javascript
2 réponses
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
5 oct. 2019 à 23:27
5 oct. 2019 à 23:27
Bonjour,
Tu nous l'as dis toi même
Hors... je ne vois pas d'addEventListenerdans ton code...
donc.. commence par suivre les consignes
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
https://www.pierre-giraud.com/javascript-apprendre-coder-cours/addeventlistener-gestion-evenement/
Tu nous l'as dis toi même
j'ai des consigne a respecter:
sans modifier le code HTML.
Utiliser la méthode addEventListener() pour gérer les événements et exploiter l'objet Event.
Hors... je ne vois pas d'addEventListenerdans ton code...
donc.. commence par suivre les consignes
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
https://www.pierre-giraud.com/javascript-apprendre-coder-cours/addeventlistener-gestion-evenement/
MI7QC
Messages postés
2
Date d'inscription
samedi 5 octobre 2019
Statut
Membre
Dernière intervention
7 octobre 2019
Modifié le 7 oct. 2019 à 16:24
Modifié le 7 oct. 2019 à 16:24
Merci pour la lecture j'ai réussis la première étape ma souris devient un pointer et donne de l'opacité a l'image au survole.
par contre je me prend la tete depuis hier, je suis vraiment a cour d'imagination pour finir la dernier etape:
Quand on clique sur une image de gauche ou de droite, une image agrandie est affichée au centre. (comme montré a mon premier poste)
on pourrait me donner une exemple comment faire ou un lien qui cible ce que je demande.
merci
par contre je me prend la tete depuis hier, je suis vraiment a cour d'imagination pour finir la dernier etape:
Quand on clique sur une image de gauche ou de droite, une image agrandie est affichée au centre. (comme montré a mon premier poste)
on pourrait me donner une exemple comment faire ou un lien qui cible ce que je demande.
merci
<!doctype html> <html lang="fr"> <head> <title>TP1, galerie d'images</title> <meta charset="UTF-8"> <style> /* Insérer votre code CSS ici. */ body { margin: 0 auto; } .gauche{ float: left; } .droite{ float: right; } .centre img{ width: 600px; } .centre{ display: inline-block; } img{ width: 300px; border-width:3px; border-style:solid; border-color:rgb(0, 0, 0); display: block; /*cursor: pointer;*/ } /* img:hover { opacity: 0.5; } */ #image_centre{ border-top: 3px solid rgb(0, 0, 0); border-bottom: 3px solid rgb(0, 0, 0); border-left: none; border-right: none; /*cursor:default;*/ } #image_02{ border-top: none; } #image_04{ border-top: none; } </style> <script> window.onload = function() { let cGauche = document.querySelectorAll('.gauche img'); for (let i = 0; i < cGauche.length; i++) { cGauche[i].style.cursor = "pointer"; cGauche[i].addEventListener('mouseover', function(){this.style.opacity = "0.5"}) cGauche[i].addEventListener("click",function(){ if(this.parentNode.parentNode.className == "gauche"){ this.parentNode.className = "centre" } if(this.style.width == "600px"){ this.style.width ="300px" this.parentNode.parentNode.className = "gauche" } else if(this.style.width ="300px"){ this.style.width ="600px" this.parentNode.parentNode.className = "centre" } }) } for (let i = 0; i < cGauche.length; i++) { cGauche[i].style.cursor = "pointer"; cGauche[i].addEventListener('mouseout', function(){this.style.opacity = "1"}) } let cDroite = document.querySelectorAll('.droite img'); for (let i = 0; i < cDroite.length; i++) { cDroite[i].style.cursor = "pointer"; cDroite[i].addEventListener('mouseover', function(){this.style.opacity = "0.5" }) } for (let i = 0; i < cDroite.length; i++) { cDroite[i].style.cursor = "pointer"; cDroite[i].addEventListener('mouseout', function(){this.style.opacity = "1"}) } } </script></head><body> <div id="conteneur" class="conteneur"> <div class="gauche"> <div class="haut"><img id="image_01" src="images/image_01.jpg" alt=""></div> <div class="bas" ><img id="image_02" src="images/image_02.jpg" alt=""></div> </div> <div class="centre"> <img id="image_centre" src="images/image_01.jpg" alt=""> </div> <div class="droite"> <div class="haut"><img id="image_03" src="images/image_03.jpg" alt=""></div> <div class="bas" ><img id="image_04" src="images/image_04.jpg" alt=""> </div> </div> </div> </body> </html>
jordane45
Messages postés
38138
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 avril 2024
4 649
7 oct. 2019 à 17:14
7 oct. 2019 à 17:14
Des exemples... il en existe des milliers sur le net....
Par exemple :
https://www.google.com/search?q=javascript+modal+image
Par exemple :
https://www.google.com/search?q=javascript+modal+image