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 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 - 7 oct. 2019 à 17:14

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

A voir également:

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
5 oct. 2019 à 23:27

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/

Réponse 2 / 2

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

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 38308 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 24 novembre 2024 4 705
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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

code couleur associé a une image

Cheval de Troie JS/Kryptik.I

'JS/Agent.TS' Qu'est ce que c'est ?

Faire un echo dans un script JS