JavaScript Image Rollover Code

Moving cursor over the picture affects on other images. When the mouse over the link, the other images will also rollover at the same time. It can allow your users to view your product images, photos, etc. on the same page.

Script Demo:

Demo

JavaScript Code:

Insert this code into <head> tags

<script type="text/javascript">
if (document.images) {
    a_1 = new Image;
    a_1.src = "a_1.gif";
    a_2 = new Image;
    a_2.src = "a_2.gif";
    a_3 = new Image;
    a_3.src = "a_3.gif"
    a_4 = new Image;
    a_4.src = "a_4.gif";

    b_1 = new Image;
    b_1.src = "b_1.gif";
    b_2 = new Image;
    b_2.src = "b_2.gif"
    b_3 = new Image;
    b_3.src = "b_3.gif";
    b_4 = new Image;
    b_4.src = "b_4.gif";
}

function showImg(imgname, rollname)
{
    if (document.images) {
        window.onerror = null;
        document.getElementById(rollname).src=eval(imgname + ".src");
    }
}

</script>

Insert this code into <body> tags

<table border="0" cellpadding="0" cellspacing="0" width="85%">
        <tr>
            <td valign="top" width="74">
                <table border="0" cellpadding="3" cellspacing="0" width="100%" id="rolllist">
                    <tr>
                        <td><a href="#" onmouseover="showImg('a_1','roll_a');showImg('b_1','roll_b')"><img src="Thumbnail-1.gif" width="74" height="18" border="0"></a></td>
                    </tr>
                    <tr>
                        <td><a href="#" onmouseover="showImg('a_2','roll_a');showImg('b_2','roll_b')"><img src="Thumbnail-2.gif" width="74" height="18" border="0"></a></td>
                    </tr>
                    <tr>
                        <td><a href="#" onmouseover="showImg('a_3','roll_a');showImg('b_3','roll_b')"><img src="Thumbnail-3.gif" width="74" height="18" border="0"></a></td>
                    </tr>
                    <tr>
                        <td><a href="#" onmouseover="showImg('a_4','roll_a');showImg('b_4','roll_b')"><img src="Thumbnail-4.gif" width="74" height="18" border="0"></a></td>
                    </tr>
                </table>
            </td>
            <td align="center" width="426" valign="center" align="center">
                <img src="a_blank.gif" id="roll_a">
            </td>
            <td valign="top" valign="center" align="left">
                <br><img src="b_blank.gif" id="roll_b">
            </td>
        </tr>
    </table>

Instruction:

Change the following text:

Thumbnail-1.gif - Thumbnail URL channels.
a_1.gif - Full-size image URL channels.

Webmaster » Web Programming » JavaScript » Image Effects » Rollover Code

Related Links:

Home | Sitemap | Bookmark This Page

Sponsored Links

Recommended Links