On-Click img border = #color - Plusieurs images - Seulement besoin de 1 en surbrillance à la fois

Fondamentalement, ce que j'essaie d'accomplir est de créer une liste d'images (disons 10) et en cliquant sur l'une de ces images, leur frontière changements à une couleur spécifique; actuellement en train d'accomplir cela avec un simple événement onClick avec JS. Ce n'est pas un problème. Le problème survient lorsque vous cliquez sur une image seconde ou troisième ou quatrième; toutes les images cliquées restent bien en évidence. Je voudrais le régler pour que seule la dernière image (actuelle) sélectionnée dans l'ensemble reste avec la couleur de la bordure modifiée.On-Click img border = #color - Plusieurs images - Seulement besoin de 1 en surbrillance à la fois

Quelle est la meilleure façon d'accomplir cet effet simple?

Source

2010-07-30 Z with a Z

Ci-dessous un exemple de travail simple:

<!doctype html> 
    <html> 
     <head> 
      <title>Website.com</title> 

      <style type="text/css"> 
      .normal { 
       border:none; 
      } 
      .highlighted { 
      border:1px solid #336699; 
      } 
      </style> 

      <script type="text/javascript"> 


      var ImageSelector = function() { 
       var imgs = null; 
       var selImg = null; 

       return { 
       addImages: function(container) { 
        imgs = container.getElementsByTagName("img"); 
        for(var i = 0, len = imgs.length; i < len; i++) { 
         var img = imgs[i]; 
         img.className = "normal"; 
         img.onclick = function() { 
          if(selImg) { 
          selImg.className = "normal"; 
          } 
          this.className = "highlighted"; 
          selImg = this; 
         }; 
        } 
       } 
       }; 
      }(); 

      </script> 

     </head> 
     <body> 
      <div> 
       <div id="menu"> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
        <img src="cube.png" width="30" height="30" /> 
       </div> 
      </div> 

      <script type="text/javascript"> 

       var div = document.getElementById("menu"); 
       ImageSelector.addImages(div); 

      </script> 
     </body> 
    </html>

Cela n'utilise pas de bibliothèque tels que jQuery. C'est tout simplement 'ol js. Aussi le code est pour l'exemple

Source

2010-07-30 18:48:37 naikus

Facile le fait! Merci –

@Z avec un Z, vous êtes les bienvenus! – naikus

Je déplacerais la ligne ";.style.border =" 1px solid blue de la boucle for (juste en dessous); Il suffit de l'appeler une fois. –

Je voudrais tirer parti de jQuery. Donnez à chacune de vos images une classe, par exemple "imageHighlight" ou quelque chose comme ça. Ensuite, vous pouvez faire quelque chose comme ça (complètement non testé):

$(document).ready(function() { 
    $('img.imageHighlight').click(function() { 
     $('img.imageHighlight').css('border-width', 0); 
     $(this).css('border-width', '3px'); 
    }); 
});

et ont des CSS avec elle:

img.imageHighlight { 
    border: 0px solid #345678; 
}

Il y a probablement même une meilleure façon de le faire en activant des classes CSS ou quelque chose, mais Je suis paresseux en ce moment. encore à digérer le déjeuner :)

Source

2010-07-30 18:41:05

Je vais tenter le coup. Merci pour la contribution. –

On-Click img border = #color - Plusieurs images - Seulement besoin de 1 en surbrillance à la fois

Répondre

Questions connexes