0

特定のテキストにカーソルを合わせると、バナーの画像が変化する JavaScript で作成されたバナーがあります。

私はそれをie8で互換性を持たせる方法を考えていました..

このチュートリアルを使用して、js を作成しました。

http://www.javascriptkit.com/script/script2/rolldifferent.shtml

私もマウスアウトしようとしていますが、画像が変わります。

jsコードは次のとおりです。

<script type="text/javascript">function changeimage(towhat,url){if (document.images){document.images.targetimage.src=towhat.src gotolink=url}}functionwarp({window.location=gotolink}</script>

<script>var myimages=new Array()var gotolink="#"function preloadimages(){for (i=0;i<preloadimages.arguments.length;i++){myimages[i]=newImage()myimages[i].src=preloadimages.arguments[i]}}preloadimages("map_wm_hover.gif", "map_wm_hover2.gif","map_wm.gif")</script>

CSSは次のとおりです。

<div id="base"><div id="mapcontainer"><a href="javascript:warp()"><img src="map_wm.gif" name="targetimage" border=0></a></div>


<div id="textcontainer"><div class="textboxinner1"><a href="index.html"onMouseover="changeimage(myimages[2],this.href)">8CCC REQUESTS/TALKBACK</a></div>

<div class="textboxinner2"><a href="index.html"onMouseover="changeimage(myimages[1],this.href)">Alice Springs  8952 7771</a></div>

<div class="textboxinner2"><a href="index.html"onMouseover="changeimage(myimages[0],this.href)">Tenant Creek 8952 7182</a></div>

<div class="textboxinner3"><span class="t3nonelink">...other contact details <a href="index.html" onMouseover="changeimage(myimages[2],this.href)">here</a></span></div>

4

1 に答える 1

1

これは、JavaScript でアニメーション GIF が正しく読み込まれない IE の問題だと思います。回避策は、画像をスクリプトにロードするのではなく、HTML コードの非表示の div に配置することです。肯定的な副作用は、これにより JavaScript が大幅に簡素化されることです。http://jsfiddle.net/5pZLT/7を参照してください

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>​

Javascript:

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

ちなみに、元のコードには多くの ;s があり、動作を停止する傾向がありました。

于 2012-12-05T13:16:50.900 に答える