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 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 - 7 oct. 2019 à 17:14
jordane45 Messages postés 38285 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 13 novembre 2024 - 7 oct. 2019 à 17:14
A voir également:
- Mouseout js
- Arrondi js - Forum Javascript
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Pixlr - Forum Graphisme
- Please enable js and disable any ad blocker - Forum Mozilla Firefox
- Arrondir js ✓ - Forum Windows
2 réponses
jordane45
Messages postés
38285
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2024
4 697
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
38285
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 novembre 2024
4 697
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