0

イメージマップを使用してスライダーでいくつかの画像をホバーしていますが、うまく機能しますが、一度読み込まれるまでちらつきがあり、その後はうまく機能します。なぜこれが起こっているのか知っている人はいますか？

ちなみに、FIREFOXでのみ発生します

<script>
    Image1 = new Image()
    Image1.src = "images/slide1aroll.jpg"
    function firstmap() {
        document.emp.src = Image1.src; 
        return true;
    }
</script>

<li style="width: 480px; height: 610px;"><img src="images/slide1a.jpg" name="emp" id="emp" class="emp" width="480" height="610" usemap="#model1" style="display:block; border:none;" border="0" /></li>
<map name="model1" id="model1" name="model1">
    <area shape="rect" coords="31,6,289,576" href="#" onmouseover="firstmap();" onmouseout="document.emp.src = 'images/slide1a.jpg';" alt=""/>
    <area shape="rect" coords="303,9,475,605" href="#" onmouseover="firstmap2();" onmouseout="document.emp.src = 'images/slide1a.jpg';" />
</map>
4

2 に答える 2

1

画像にカーソルを合わせるとすぐに画像のソースが変更されるため、画像がちらつきます。そのため、マウスは意図したものではなく、別の画像の上に置かれています。

マウスが新しく読み込まれた画像の上に来るとすぐに、新しい画像は非表示になります。これは、マウスが古い画像の上に移動していないためです。非表示になった瞬間に、マウスが再び古い画像の上に来るので、新しい画像が再び表示されます。

このプロセスは、ちらつき効果を与え続けます。古いイメージ - 新しいイメージ - 古いイメージ ....など

お役に立てれば。

于 2013-02-12T09:33:43.753 に答える
0

画像のキャッシュを行う 

<div style="display: none">
    <img src="image1.png" />
    <img src="image2.png" />
    <img src="image3.png" />
</div>

これにより、最初にすべての画像を表示できます。今はちらつきません。それを試してみてください

于 2013-02-12T09:44:13.970 に答える