MouseOver effect with a single image

[ITA]

I am using a single image with an image map as a navbar. I am trying to change the single image to another image from the hot spot on the page. I am having trouble figuring out the code for a single image. I am familiar with multiple images and changing them, but I am stuck with the single image. below is my code<br>************************************************************<br><br>&lt;MAP NAME=&quot;BAR&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;AREA SHAPE=RECT COORDS=&quot;(2,110)(42,110)&quot; HREF=&quot;link.html&quot;&nbsp;&nbsp;ONMOUSEOVER=active('b1') ONMOUSEOUT=inactive('b1')&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;AREA SHAPE=RECT COORDS=&quot;(2,111)(42,213)&quot; HREF=&quot;LINK2.HTML&quot; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;AREA SHAPE=RECT COORDS=&quot;(2,214)(42,325)&quot; HREF=&quot;LINK3.HTML&quot; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;AREA SHAPE=RECT COORDS=&quot;(2,326)(42,446)&quot; HREF=&quot;LINK4.HTML&quot; &gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;AREA SHAPE=RECT COORDS=&quot;(2,447)(42,541)&quot; HREF=&quot;LINK5.HTML&quot; &gt;<br>&nbsp;&nbsp;&lt;/MAP&gt;<br>&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&lt;SCRIPT LANGUAGE=&quot;JavaScript&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--HIDE FROM NON JAVA BROWSERS<br> <br> //THIS IS A FUNCTION THAT WILL CHANGE THE IMAGE OVER THE <br> if (document.images){<br> b1on = new Image(); b1on.src = &quot;images/b1a.gif&quot;;<br> b2on = new Image(); b2on.src = &quot;images/b2a.gif&quot;;<br> b3on = new Image(); b3on.src = &quot;images/b3a.gif&quot;;<br> b4on = new Image(); b4on.src = &quot;images/b4a.gif&quot;;<br> b5on = new Image(); b5on.src = &quot;images/b5a.gif&quot;;<br> //<br> b1off = new Image(); b1off.src = &quot;images/b.gif&quot;;<br> b2off = new Image(); b2off.src = &quot;images/b.gif&quot;;<br> b3off = new Image(); b3off.src = &quot;images/b.gif&quot;;<br> b4off = new Image(); b4off.src = &quot;images/b.gif&quot;;<br> b5off = new Image(); b5off.src = &quot;images/b.gif&quot;;<br> }<br> <br> //These are the functions that will be called from the mouseover and mouseout<br> function active(imgName){<br> if (document.images){<br> imgOn = eval(imgName + &quot;on.src&quot;<br> document

.src = imgOn;<br> }<br> }<br> <br> function inactive(imgName){<br> if (document.images){<br> imgOff = eval(imgName + &quot;off.src&quot;<br> document

.src = imgOff;<br> }<br> }<br> <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//STOP HIDING--&gt;<br>&nbsp;&nbsp;&nbsp;&lt;/SCRIPT&gt;<br>&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;<br><br><br>&lt;script LANGUAGE=JAVASCRIPT&gt;<br><br>&lt;!--<br><br>function&nbsp;&nbsp;_CF_checkgetquestion(_CF_this)<br><br>&nbsp;&nbsp;&nbsp;&nbsp;{<br><br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;}<br><br><br>//--&gt;<br><br>&lt;/script&gt;<br><br>&lt;/HEAD&gt;<br>&lt;BODY BGCOLOR=&quot;#FFFFFF&quot;&gt;<br>&nbsp;&nbsp;&lt;DIV ALIGN=LEFT&gt;<br> &lt;TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0&gt;<br> &nbsp;&nbsp;&lt;TR&gt;<br> &lt;TD WIDTH=&quot;150&quot;&gt;<br> &nbsp;&nbsp;&lt;IMG VALIGN=BOTTOM SRC=&quot;images/sc_logo.gif&quot; &gt;<br> &lt;/TD&gt;<br> &lt;TD WIDTH=&quot;490&quot;&gt;<br> &nbsp;&nbsp;&lt;IMG SRC=&quot;images/b.gif&quot; VALIGN=TOP USEMAP=&quot;#BAR&quot; BORDER=0 NAME=b1&gt;<br> &lt;/TD&gt;<br> &nbsp;&nbsp;&lt;/TR&gt;<br> &lt;/TABLE&gt;<br>&nbsp;&nbsp;&lt;/DIV&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br>

 

[theEclipse]

you are using :<br><br>document

.src = ....;<br><br>try using :<br><br>document.images

.src = ....;<br><br> <p>theEclipse<br><a href=mailto:eclipse_web@hotmail.com>eclipse_web@hotmail.com</a><br><a href=robacarp.webjump.com>robacarp.webjump.com</a><br>**-Trying to build a documentation of a Javascript DOM, crossbrowser, of course. E-mail me if you know of any little known events and/or methods, etc.

 

[ITA]

The code that I have written works for changing the image to another image. The problem that I am having is that document

is the always the same image to start with. I will try to explain better, in the code above I am chaning the image B1 to another image then B2 too another image then so on so forth. What I am trying to find is a way to use the same image i.e. B1 every time and then change to the other images dependent upon which hot spot the mouse is over.<br><br>I hope that this makes more sense than my first question.