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 回答