Mouseover, mouseout

Messages postés
2
Date d'inscription
samedi 5 octobre 2019
Statut
Membre
Dernière intervention
7 octobre 2019
-
Bonjour a vous je fais fasse a un probleme du a un manque de compréhension, et j'aimerais qu'on m'explique comment utiliser mouseover et mouseout avec une fonction ou condition en ciblant une div qui contient deux élément images.

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.


voici un aperçus du visuel pour mieux expliquer la situation :



Donc ce que j'essais de faire:

Au survol de la souris sur une image de gauche ou de droite, un élément DIV avec transparence est
placé au-dessus pour foncer l'image (opacité), et le curseur devient de type "pointeur", ces modifications indiquent que cette image est cliquable.

donc juste qu'a maintenant la seul chose que j'ai réussis a faire c'est :

var pointer = document.getElementById("image_01").style.cursor = "pointer";

mon curseur quand il survole l'image_01 il devient pointeur,mais le probleme c'est que présentement je cible l'id image_01 (donc pas bon)
et
si je cible la div j'ai testé comme ceci:
document.querySelector(".gauche img").style.cursor = "pointer";

présentement je cible juste un élément et si je met querySelectorALL j'ai une erreur....

ce que je veux faire c'est prendre les éléments qui sont dans la class gauche qui regroupe les deux images les stocker dans une variable qui sera un Tableau et faire une fonction qui fait l'opacité au survole de l'image et le changement du curseur en pointeur




<ceci est juste a titre d'information>
la suite de mon exercice:
Quand on clique sur une image de gauche ou de droite, une image agrandie est affichée au centre.
Par exemple après avoir cliqué sur l'image numéro 1 :



<!doctype html>
<html lang="fr">
<head>
 <title>TP1, galerie d'images</title>
 <meta charset="UTF-8">
 <style>

  /* Insérer votre code CSS ici. */

 
  body {
   width: 1212px;
  }

  .gauche{
   float: left; 
  }

  .droite{
   float: right; 
  }

  .centre img{ 
   width: 600px;
   height: 603px; 
  }

  .centre{
   display: inline-block; 
  }

  img{
   width: 300px;
   height: 300px;
   border-width:3px;
    border-style:solid;
    border-color:rgb(0, 0, 0);
   display: block;
   
  }

  

  #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 () {
    
    var pointer     = document.getElementById("image_01").style.cursor = "pointer";
    var pointer = document.getElementById("image_02").style.cursor = "pointer";
    var pointer = document.getElementById("image_03").style.cursor = "pointer";
    var pointer = document.getElementById("image_04").style.cursor = "pointer";
       }
      
 </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>





Configuration: Windows / Chrome 77.0.3865.90
Afficher la suite 

2 réponses

Messages postés
26519
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 octobre 2019
1832
0
Merci
Bonjour,

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/


Commenter la réponse de jordane45
Messages postés
2
Date d'inscription
samedi 5 octobre 2019
Statut
Membre
Dernière intervention
7 octobre 2019
0
Merci
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

<!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
26519
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
17 octobre 2019
1832 -
Des exemples... il en existe des milliers sur le net....
Par exemple :
https://www.google.com/search?q=javascript+modal+image
Commenter la réponse de MI7QC