Perhaps you want something more like this:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Dynamic Select</title>
<script type="text/javascript">
<!-- //
function HighlightGroupSelection(grp)
{
var x, len = document.images.length;
for (x=0; x<len; ++x)
{
if (document.images[x].name)
{
document.images[x].style.opacity = 0.5;
}
}
if (grp.length)
{
len = grp.length;
for (x=0; x<len; ++x)
{
grp[x].style.opacity = 1.0;
}
}
else
{
grp.style.opacity = 1.0;
}
return true;
}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (slice.psd) -->
<table id="Table_01" width="721" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/index_01.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_02.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_03.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_04.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_05.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_06.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_07.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_08.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_09.jpg" widt h="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>
<tr>
<td>
<img src="images/index_10.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_11.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_12.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_13.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_14.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_15.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_16.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_17.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_18.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>
<tr>
<td>
<img src="images/index_19.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_20.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_21.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_22.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_23.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_24.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_25.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/index_26.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_27.jpg" width="80" height="101" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_28.jpg" width="80" height="100" alt="" name="anerson"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_29.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_30.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_31.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_32.jpg" width="80" height="100" alt="" name="test1"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_33.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_34.jpg" width="80" height="100" alt="" name="test2"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td rowspan="2">
<img src="images/index_35.jpg" width="80" height="100" alt="" name="test3"
onclick="return HighlightGroupSelection(document.images[this.name])"></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_36.jpg" width="80" height="99" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="99" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
However, other browsers don't all do opacity in the same way.
Reply With Quote
Bookmarks