Swapping pictures in HTML

I used to hate writing Javascript but since VS 2008 SP 1 I find it pretty entertaining.

Anyway, I had the following issue: Display a black and white version of an image when the page is loaded. When the user hovers over the image display the image with colors. Also, it should work in the common browser.

I tried the following options:

  1. Anchor tag with the CSS hover selector (a:hover). I could not get it to work in FireFox 3.0 because of the size (width and heigth) could be set on an anchor. That was my best guess.
  2. Image tag with onmouseover and onmouseout Javascript events attached. In the event the src attribute is changed to the black and white or color version of the picture. Worked great in IE but not really in FF. FF would trigger the onmouseout event when the src attribute is changed.
  3. Two image tags within one parent element. Both images are positioned with absolute positions, so that they lie on top of each other. The z-index controls which is in the front. Javascript on the parent element sends either the first or the second image to the front via changing the z-index. Works fine in IE 7.0 and FF 3.0.

Here the code for solution 3:

<html>
    <head>
        <script language="javascript">
            function SendLastChildToFront(parent, nodeName)
            {
                // Get first and last child element that matches the node name.
                var imgChild0;
                var imgChild1;
                for(i=0; i<parent.childNodes.length; i++)
                {
                    if (parent.childNodes[i].nodeName == nodeName)
                    {                   
                        if (imgChild0 == null)
                        {
                            imgChild0 = parent.childNodes[i];
                        }
                        else
                        {
                            imgChild1 = parent.childNodes[i];
                        }
                    }
                }
                if (imgChild0 == null || imgChild1 == null)
                    return;

                // Swap the z-index values.
                var zi0;
                var zi1;
                zi0 = imgChild0.style.zIndex;
                zi1 = imgChild1.style.zIndex;
                if (zi0 < zi1)
                    return;
                imgChild0.style.zIndex = zi1;
                imgChild1.style.zIndex = zi0;
            }

            function SendFirstChildToFront(parent, nodeName)
            {
                // Get first and last child elements that matches the node name.
                var imgChild0;
                var imgChild1;
                for(i=0; i<parent.childNodes.length; i++)
                {
                    if (parent.childNodes[i].nodeName == nodeName)
                    {                   
                        if (imgChild0 == null)
                        {
                            imgChild0 = parent.childNodes[i];
                        }
                        else
                        {
                            imgChild1 = parent.childNodes[i];
                        }
                    }
                }
                if (imgChild0 == null || imgChild1 == null)
                    return;

                // Swap the z-index values.
                var zi0;
                var zi1;
                zi0 = imgChild0.style.zIndex;
                zi1 = imgChild1.style.zIndex;
                if (zi0 > zi1)
                    return;
                imgChild0.style.zIndex = zi1;
                imgChild1.style.zIndex = zi0;
            }
            </script>
    </head>
<body>
    <span onmouseover="SendLastChildToFront(this, ‘IMG’)" onmouseout="SendFirstChildToFront(this, ‘IMG’)" display="block">
        <img style="position:absolute;z-index:1" src="Bild005bw.jpg"/>
        <img style="position:absolute;z-index:0" src="Bild005.jpg"/>
    </span>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *