Basically what I am trying to acplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently acplishing this with a simple onClick event with JS. That's not an issue. The trouble es in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
What is the best way to acplish this simple effect?
Basically what I am trying to acplish is create a list of images (let's say 10) and upon clicking any of these images, their border changes to a specific color; currently acplishing this with a simple onClick event with JS. That's not an issue. The trouble es in when clicking a second or third or forth image; all of the images clicked remain highlighted, of course. I would like to set it so that only the last (current) image selected in the set remain with the border color changed.
What is the best way to acplish this simple effect?
Share Improve this question asked Jul 30, 2010 at 18:33 Z with a ZZ with a Z 6032 gold badges6 silver badges12 bronze badges2 Answers
Reset to default 4Below is a simple working example:
<!doctype html>
<html>
<head>
<title>Website.</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
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 (pletely 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 :)