使用图像映射时,鼠标悬停时图像闪烁javascript

使用图像映射时,鼠标悬停时图像闪烁javascript,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我使用图像贴图将一些图像悬停在滑块中,效果很好,但在加载一次之前会出现闪烁,然后效果会很好。有人知道为什么会这样吗 顺便说一下,这只发生在FIREFOX中 <script> Image1 = new Image() Image1.src = "images/slide1aroll.jpg" function firstmap() { document.emp.src = Image1.src; return true;

我使用图像贴图将一些图像悬停在滑块中,效果很好,但在加载一次之前会出现闪烁,然后效果会很好。有人知道为什么会这样吗

顺便说一下,这只发生在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>

Image1=新图像()
Image1.src=“images/slidearoll.jpg”
函数firstmap(){
document.emp.src=Image1.src;
返回true;
}
宽度:480px;高度:610px;“>

图像会闪烁,因为只要您浏览图像,就会更改图像的来源。因此,现在您的鼠标悬停在另一个图像上,而不是您想要的图像

一旦鼠标移到新加载的图像上,新图像就会被隐藏,因为您的鼠标现在没有悬停在旧图像上。当它被隐藏的时候,你的鼠标会再次移到旧的图像上,这样新的图像就会再次可见

该过程继续产生闪烁效果。旧图像-新图像-旧图像…等等


希望这能有所帮助。

对图像进行缓存

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


有了这个,你的所有形象在第一次去。它现在不会闪烁。试试看

嗨,谢谢,但我认为这与预加载图像有关,如果不是的话,每次我在图像上移动鼠标时都会闪烁。但正如我所说,这只发生在我第一次悬停的时候,然后直到我重新加载页面它工作得很好谢谢你,我尝试了一个图像预加载程序,但它没有工作,但这个技巧,所以。。干杯