javascript - JS-如何在 Mouseout 上更改图像

Question

我这里有一个带有鼠标悬停效果的横幅:

如您所见，鼠标悬停效果运行良好，但我不知道如何制作鼠标悬停动画。以下是其当前代码:

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>

希望你能帮我实现mouseout的效果。

Answer 1

我建议使用 'onmouseout="changeimage(2,this.href)"'(与 mouseover 属性在同一位置)。或者使用 jQuery 处理程序，这对您来说更复杂确实需要。