CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimated-gif
Niccolo
Niccolo

Reputation: 157

JS- How to change image on Mouseout

I have an banner with mouse over effects here:

As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:

Javascript:

var gotolink = "#";
function changeimage(imageNumber, url) {
    if (document.images) {
        document.images.targetimage.src = 
            document.getElementById('hiddenImages').children[imageNumber].src;
        gotolink = url;
    }
}

HTML:

DIV id=base>
    <DIV id=mapcontainer>
        <A href="javascript:warp()">
            <IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
        </A>
    </DIV>

    <DIV id=textcontainer>
        <DIV class=textboxinner1>
            <A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
        </DIV>
        <DIV class=textboxinner2>
            <A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
        </DIV>
        <DIV class=textboxinner2>
            <A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
        </DIV>
        <DIV class=textboxinner3>
            <SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN> 
         </DIV>
     </DIV>
 </DIV>
 <div id="hiddenImages" style="display: none">
     <img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
     <img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
     <img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>

Hope you could help me achieve the mouseout effect.

Upvotes: 4

Views: 183

Answers (1)

Oliver Cooper
Oliver Cooper

Reputation: 845

I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.

Upvotes: 1

Related Questions