...

View Full Version : Please Help Highlight Image



NBAXTER
08-27-2010, 02:40 PM
Hi, I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script> var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script> to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here.
Any help will be much appreciated.
Thank you.

vwphillips
08-27-2010, 05:23 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script>
var highlight_color = '#FF0033';
function toggle_highlight(img) {
var tr=img;
while (tr.parentNode&&tr.nodeName.toUpperCase()!='TR'){
tr=tr.parentNode;
}
var images = tr.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var image = images[i];
image.style.borderColor = image == img ? highlight_color : 'blue';
}
}

</script> </head>

<body>
<img id="i1" onclick="toggle_highlight('i1')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" />
<table>
<tr>
<td><img onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
<td><img onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
</tr>
<tr>
<td><img onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
<td><img onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
</tr>
</table></body>

</html>

NBAXTER
08-31-2010, 08:44 AM
Thank you Vwphillips, It seems so easy when you know how, wish I knew how some of the time lol.

Thanks again! Thank you for your time.
Much appreciated.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum