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>

希望你能帮我实现鼠标效果。

Answer 1

我建议使用'onmouseout =“changeimage（2，this.href）”'（与 mouseover 属性相同的地方。或者使用jQuery处理程序，这对你来说更复杂需要真的。

JS-如何在Mouseout上更改图像

1 个答案: