Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org
#

Q1015 How can I swap one of many images using onMouseOver and onMouseOut?

You are here: irt.org | FAQ | JavaScript | Image | Q1015 [ previous next ]

Try something like the following:

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.images) {
    name1on  = new Image();name1on.src  = 'name1on.gif'; name1off  = new Image();name1off.src  = 'name1off.gif';
    name2on  = new Image();name2on.src  = 'name2on.gif'; name2off  = new Image();name2off.src  = 'name2off.gif';
    name3on  = new Image();name3on.src  = 'name3on.gif'; name3off  = new Image();name3off.src  = 'name3off.gif';
    name4on  = new Image();name4on.src  = 'name4on.gif'; name4off  = new Image();name4off.src  = 'name4off.gif';
    name5on  = new Image();name5on.src  = 'name5on.gif'; name5off  = new Image();name5off.src  = 'name5off.gif';
    name6on  = new Image();name6on.src  = 'name6on.gif'; name6off  = new Image();name6off.src  = 'name6off.gif';
    name7on  = new Image();name7on.src  = 'name7on.gif'; name7off  = new Image();name7off.src  = 'name7off.gif';
    name8on  = new Image();name8on.src  = 'name8on.gif'; name8off  = new Image();name8off.src  = 'name8off.gif';
    name9on  = new Image();name9on.src  = 'name9on.gif'; name9off  = new Image();name9off.src  = 'name9off.gif';
    name10on = new Image();name10on.src = 'name10on.gif';name10off = new Image();name10off.src = 'name10off.gif';
    name11on = new Image();name11on.src = 'name11on.gif';name11off = new Image();name11off.src = 'name11off.gif';
    name12on = new Image();name12on.src = 'name12on.gif';name12off = new Image();name12off.src = 'name12off.gif';
}

function swapOn(name) {
    if (document.images)
        document.images[name].src = eval(name + 'on.src');
}

function swapOff(name) {
    if (document.images)
        document.images[name].src = eval(name + 'off.src');
}
//--></SCRIPT>

<A HREF="page1.htm" onMouseOver="swapOn('name1')" onMouseOut="swapOff('name1')"><IMG NAME="name1" SRC="image1off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 1"></A>
<A HREF="page2.htm" onMouseOver="swapOn('name2')" onMouseOut="swapOff('name2')"><IMG NAME="name2" SRC="image2off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 2"></A>
<A HREF="page3.htm" onMouseOver="swapOn('name3')" onMouseOut="swapOff('name3')"><IMG NAME="name3" SRC="image3off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 3"></A>
<A HREF="page4.htm" onMouseOver="swapOn('name4')" onMouseOut="swapOff('name4')"><IMG NAME="name4" SRC="image4off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 4"></A>
<A HREF="page5.htm" onMouseOver="swapOn('name5')" onMouseOut="swapOff('name5')"><IMG NAME="name5" SRC="image5off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 5"></A>
<A HREF="page6.htm" onMouseOver="swapOn('name6')" onMouseOut="swapOff('name6')"><IMG NAME="name6" SRC="image6off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 6"></A>
<A HREF="page7.htm" onMouseOver="swapOn('name7')" onMouseOut="swapOff('name7')"><IMG NAME="name7" SRC="image7off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 7"></A>
<A HREF="page8.htm" onMouseOver="swapOn('name8')" onMouseOut="swapOff('name8')"><IMG NAME="name8" SRC="image8off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 8"></A>
<A HREF="page9.htm" onMouseOver="swapOn('name9')" onMouseOut="swapOff('name9')"><IMG NAME="name9" SRC="image9off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 9"></A>
<A HREF="page10.htm" onMouseOver="swapOn('name10')" onMouseOut="swapOff('name10')"><IMG NAME="name10" SRC="image10off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 10"></A>
<A HREF="page11.htm" onMouseOver="swapOn('name10')" onMouseOut="swapOff('name11')"><IMG NAME="name11" SRC="image11off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 11"></A>
<A HREF="page12.htm" onMouseOver="swapOn('name12')" onMouseOut="swapOff('name12')"><IMG NAME="name12" SRC="image11off.gif" WIDTH="100" HEIGHT="100" BORDER="0" ALT="image 11"></A>

©2018 Martin Webb