Opacity Thumbnail Help

[baddotz]

hi all basically i have done up alittle and im stucked halfway heres the code. the pictures have a different group meaning test1 test2 test3 anerson these are 4 different groups. for eg if i clicked on test1 all groups pictures from test1 will remain the same and the rest of the pictures the opacity will change to a different tone see the code. but im stucked in the middle it seems its not working in a way

or you can take a look at it it has bugs

http://baddot.co.cc/javascript/

[baddotz]

<tr>
        <td>
            <img src="images/index_01.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_02.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_03.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_04.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_05.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_06.jpg" width="80" height="100" alt="" name="anerson" onMouseDown="document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_07.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_08.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_09.jpg" widt h="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_10.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_11.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_12.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_13.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_14.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_15.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_16.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_17.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_18.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
    </tr>
    <tr>
        <td>
            <img src="images/index_19.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td>
            <img src="images/index_20.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_21.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_22.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_23.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_24.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
        <td>
            <img src="images/index_25.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td>
            <img src="images/index_26.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td rowspan="2">
            <img src="images/index_27.jpg" width="80" height="101" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
        <td>
            <img src="images/spacer.gif" width="1" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/index_28.jpg" width="80" height="100" alt="" name="anerson" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5"></td>
        <td rowspan="2">
            <img src="images/index_29.jpg" width="80" height="100" alt="" name="test2" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5; document.images['test2'].style.opacity = 1"></td>
        <td rowspan="2">
            <img src="images/index_30.jpg" width="80" height="100" alt="" name="test3" ONMOUSEdown="document.images['test1'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test2'].style.opacity = 0.5; document.images['test3'].style.opacity = 1"></td>
        <td rowspan="2">
            <img src="images/index_31.jpg" width="80" height="100" alt="" name="test1" ONMOUSEdown="document.images['test2'].style.opacity = 0.5; document.images['anerson'].style.opacity = 0.5; document.images['test3'].style.opacity = 0.5"></td>

heres what i have written

[Nile]

So you basically have a gallery under each photo - and when you click on a gallery, all the other photos change to that photo's gallery?
BTW:
Replace all the:

ONMOUSEdown=

With:

onmousedown=

[baddotz]

erm basically its a photo gallery with alot of pictures in it but there are different schools and categories so i wana categories them by giving them a group name then when i click on the picture eg test1 group it will only show the test1 group then the rest of it will opacity to the back so the test1 group can see clearer lets take it there is 2 pictures so 2 pictures will be the outstanding and the rest will be alpha to about 30% and the picture the user clicked will have a pop up like highslide

[baddotz]

i got this to work by a friend but it dosent support with ie and firefox can anyone help?

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

[Nile]

If it doesn't work in IE or FF, what does it work in?
Half the problem is:

grp.style.opacity = 1.0;

Should be:

grp.style.opacity = 0.1;

Give this code a try:

<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;
            document.images[x].style.mozOpacity = 0.5;
            document.images[x].filters.alpha.opacity = 50;
        }
    }
    if (grp.length)
    {
        len = grp.length;
        for (x=0; x<len; ++x)
        {
            grp[x].style.opacity = 0.1;
            grp[x].style.mozOpacity = 0.1;
            grp[x].filters.alpha.opacity = 10;
        }
    }
    else
    {
        grp[x].style.opacity = 0.1;
        grp[x].style.mozOpacity = 0.1;
        grp[x].filters.alpha.opacity = 10;
    }
    return true;
}
// -->
</script>

[vwphillips]

<!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>
<style type="text/css">
/*<![CDATA[*/
#tst {
  width:300px;border:solid black 1px;
}

/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function Tst(obj){
 var zxcevt=window.event||arguments.callee.caller.arguments[0];
 var img=window.event?zxcevt.srcElement:zxcevt.target;
 if(img.nodeType==3) img=img.parentNode;
 if (img.tagName!=='IMG') return;
 var imgs=obj.getElementsByTagName('IMG');
 for (var z0=0;z0<imgs.length;z0++){
  zxcOpacity(imgs[z0],imgs[z0].parentNode==img.parentNode?100:30);
 }

}
function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}

/*]]>*/
</script>

</head>

<body>
<div id="tst" onclick="Tst(this);" >
<div class="photos" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
</div>
<div class="photos" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
</div>
<div class="photos" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50" />
</div>
</div>
</body>

</html>

[baddotz]

it only works with safari

[Nile]

Does my code or wvwhillips only work in safari?

[vwphillips]

code I posted tested with IE and Moz FF