...

View Full Version : how to Highlight choose image?



yossidd
10-01-2012, 08:02 PM
hi
i have 10 pictures...
i want when the user click on image this image will have red border...
and if he will click on diffrent picture it will have red border and the last image will not have the red border
how pleaes?
have a nice day !!!

WolfShade
10-01-2012, 08:18 PM
Make an array of the images, loop through the array and set all to clear border, then make the selected image have a red border.

yossidd
10-01-2012, 08:24 PM
Make an array of the images, loop through the array and set all to clear border, then make the selected image have a red border.
I maked array
but i dont know how to clear border and after that to make the selected image have a red border

WolfShade
10-01-2012, 08:43 PM
Pass the image ID as a parameter to the function.


for(var i=0; i<arrayName.length; i++){
arrayName[i].style.border = "1px solid white";
}
document.getElementById(imageID).style.border = "1px solid red";


This is pseudo code, of course.. you'll need to change and enter information as it pertains to your page.

xelawho
10-01-2012, 09:09 PM
possibly simpler...



<head>
<style>
img {
height:200px;
width:200px;
border:5px solid black;
}
</style>
</head>
<body>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Points_of_a_horse.jpg/330px-Points_of_a_horse.jpg" onclick="changeBor(this)"/>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Horse-and-pony.jpg/310px-Horse-and-pony.jpg" onclick="changeBor(this)"/>
<script>
var changed;
function changeBor(pic){
if (changed){changed.style.borderColor="black";}
pic.style.borderColor="red";
changed=pic;
}
</script>
</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum