ansaurus

Question

On-Click img border = #color - Multiple images - Only need 1 highlighted at a time

Answer 1

A:

I would take advantage of jQuery. Give each of your images a class, for example, "imageHighlight" or something. Then you could do something like this (completely untested):

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

And have some CSS with it:

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

There's probably even a better way to do it by toggling CSS classes or something, but I'm lazy at the moment. Still digesting lunch :)

Cory Larson 2010-07-30 18:41:05

I'll give it a shot. Thanks for the input.

Z with a Z 2010-07-30 18:45:19

Answer 2

+2 A:

Below is a simple working example:

<!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>

This does not use any library such as jQuery. Its just plain 'ol js. Also the code is for the sake of example

naikus 2010-07-30 18:48:37

Easy does it! Thanks

Z with a Z 2010-07-30 19:02:00

@Z with a Z, You are welcome!

naikus 2010-07-30 19:33:48

I would move the `this.style.border = "1px solid blue";` line out of the for-loop (to just below it); it only needs to be called once.

Cory Larson 2010-07-30 19:41:08

Sweet code style!

2010-07-30 20:43:11

@Cory Larson, thanks, I've also added some more optimizations

naikus 2010-07-31 04:20:04

ansaurus

tags:

views:

answers:

On-Click img border = #color - Multiple images - Only need 1 highlighted at a time

related questions