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 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 7 oct. 2019 à 17:14
jordane45 Messages postés 37253 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 mars 2023 - 7 oct. 2019 à 17:14
A voir également:
- Mouseover, mouseout
- Mouseover css - Forum CSS
- [JS] mouseover - Forum Javascript
2 réponses
jordane45
Messages postés
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
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
37253
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 mars 2023
4 551
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
