Javascript Images onclick

Concevoir une page avec des dizaines d'images qui peuvent être choisies par l'utilisateur final. Essayer d'utiliser les événements (onclick, onmouseover et onmouseout) pour le rendre graphiquement agréable. Puisque chaque événement va changer plusieurs balises div, j'ai décidé d'utiliser Javascript au lieu de CSS. Pour éviter que l'onmouseout n'affecte une bordure d'images cliquée, j'ai assigné une variable 'imgClicked'. Le problème est que la même variable change pour chaque image cliquée. Existe-t-il un moyen d'assigner la variable pour chaque boîte afin que chaque image sache si elle a été cliquée ou non. Ou peut-être une meilleure route à prendre?Javascript Images onclick

Merci d'avance!

var borderColorOver = "#26d314"; 
 
    var borderColorOff = "#7DAFE7"; 
 
    var borderColorOn = "#d40101"; 
 
    var imgClicked = 0; 
 

 
    function heartMouseClick(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOn; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOn; 
 
     imgClicked = 1; 
 
    } else { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
     imgClicked = 0; 
 
    } 
 
    } 
 

 
    function heartMouseOver(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOver; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOver; 
 
    } 
 
    } 
 

 
    function heartMouseOut(a) { 
 
    var heartImg = a; 
 
    if (imgClicked < 1) { 
 
     var images = document.getElementsByClassName('images'); 
 
     images[heartImg].style.borderColor = borderColorOff; 
 
     var subject = document.getElementsByClassName('subject'); 
 
     subject[heartImg].style.borderColor = borderColorOff; 
 
    } 
 
    }

.pictureBox { 
 
    width: 300px; 
 
    height: 300px; 
 
    border-style: solid; 
 
    border-width: 0px; 
 
} 
 
.images { 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.subject { 
 
    width: 300px; 
 
    height: 100px; 
 
    border: 5px solid #FFBE00; 
 
}

<body> 
 

 
    <div class="pictureBox"> 
 
    <div class="picture"> 
 
     <img onmouseover="heartMouseOver(0)" onmouseout="heartMouseOut(0)" onclick="heartMouseClick(0)" class="images" border="5" src="photo-1.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 0 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(1)" onmouseout="heartMouseOut(1)" onclick="heartMouseClick(1)" class="images" border="5" src="photo-2.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 1 Description 
 
    </div> 
 
    </div> 
 
    <div class="pictureBox"> 
 
    <div> 
 
     <img onmouseover="heartMouseOver(2)" onmouseout="heartMouseOut(2)" onclick="heartMouseClick(2)" class="images" border="5" src="photo-3.jpg"> 
 
    </div> 
 
    <div class="subject" border="5"> 
 
     Image 2 Description 
 
    </div> 
 
    </div> 
 

 
</body>

Source

2016-08-26 Bill Demaria

Je suis confus pourquoi vous avez 3 fonction de faire plus ou moins la même chose. Pourquoi ne pas simplement avoir tous les événements appellent la même fonction? – NewToJS

[Une pseudo-classe très intéressante] (https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pour la tâche. – Teemu

@NewToJS Ne sois pas si sec. Tu n'es pas drôle. – DanMan

J'ai modifié votre code. J'ai ajouté des identifiants aux éléments dom et transmis l'identifiant à toutes les méthodes au lieu de les coder en dur. Voici le nouveau code dans son intégralité:

 <!doctype html> 
     <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Untitled Document</title> 

     <style type="text/css">  
     .pictureBox { 
      width: 300px; 
      height: 300px; 
      border-style: solid; 
      border-width: 0px; 
     }  
     .images { 
      width: 300px; 
      height: 200px; 
     }  
     .subject { 
      width: 300px; 
      height: 100px; 
      border: 5px solid #FFBE00; 
     }  
     </style> 

     </head> 

     <script>  
     var borderColorOver = "#26d314"; 
     var borderColorOff = "#7DAFE7"; 
     var borderColorOn = "#d40101"; 
     var imgClicked = 0; 

     function heartMouseClick(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOn; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOn; 
       imgClicked = 1; 
      } else { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
       imgClicked = 0; 
      } 
     } 
     function heartMouseOver(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOver; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOver; 
      } 
     } 
     function heartMouseOut(a) { 

      if (imgClicked < 1) { 
       var images = document.getElementById(a); 
        images.style.borderColor = borderColorOff; 
       var subject = document.getElementById('s'+a); 
        subject.style.borderColor = borderColorOff; 
      } 
     }  
     </script> 


     <body> 

     <div class="pictureBox">  
      <div class="picture"> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="0" onclick = "heartMouseClick(this.id)" class="images" border="5" src="1.jpg">        
      </div>  
      <div class="subject" id="s0" border ="5"> 
       Image 0 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="1" onclick = "heartMouseClick(this.id)" class="images" border="5" src="emergency.jpg">        
      </div>  
      <div class="subject" id="s1" border ="5"> 
       Image 1 Description 
      </div> 
     </div> 
     <div class="pictureBox">    
      <div> 
       <img onmouseover="heartMouseOver(this.id)" onmouseout="heartMouseOut(this.id)" id="2" onclick = "heartMouseClick(this.id)" class="images" border="5" src="lebron.jpg">        
      </div>  
      <div class="subject" id="s2" border ="5"> 
       Image 2 Description 
      </div> 
     </div>   

     </body> 
     </html>

Vous étiez sur la bonne voie, je viens d'ajouter ids et passer ceux à la place.

Source

2016-08-26 17:32:45 BoundForGlory

Merci @BoundForGlory, génial de vous pour refaire le code. –

Mon plaisir. J'allais avoir envie et montrer comment vous pouvez lier tous les événements en même temps, mais c'est un bon point de départ. – BoundForGlory

Vous pouvez attribuer une nouvelle propriété aux objets d'image puisque vous avez déjà un tableau d'entre eux de toute façon. Par exemple:

images[heartImg].imgClicked = true;

Il peut être un peu risqué de modifier un objet intégré, mais il devrait être assez sûr si vous choisissez un nom de propriété assez distinctif qu'aucun autre script serait peut-être essayer d'utiliser le même nom .

Si vous ne pouvez pas vous-même ajouter votre propre propriété aux objets image, une alternative serait de stocker la propriété imgClicked dans un attribut de données personnalisé des éléments DOM concernés.

Source

2016-08-26 17:30:23 DLH

Vous pouvez attribuer un identifiant unique (ID) à chacun des éléments img, puis utiliser la fonctionnalité de tableau pour prendre soin de chaque image. Ou essayez ceci:

<img id="image1101" src="image1.jpg" onclick="myFunction(this.id)" />

Ceci activera la fonction nommée myFunction() avec le "id" comme paramètre.

Ensuite, vous pouvez utiliser dans votre javascript comme:

<script type="text/javascript"> 

      function myFunction(image_id){ 
       // use your funcitons here such as 
       // document.getElementById(image_id).style; 
       // 
      } 

     </script>

Source

2016-08-26 17:35:10 Saini

Javascript Images onclick

Répondre

Questions connexes