Question

我想使用onmouseover，以便在鼠标悬停时用缩略图替换预览图片。下面的代码在Firefox和IE上工作正常，但不适用于chrome .. 这是应用samdesign.comli.com/gallery.html

的链接

    <div class="gallery" align="center">
<h1>Photo Gallery</h1><br/>

<div class="thumbnails">
    <img onMouseOver="preview.src=img1.src" id="img1" src="images/Salman_Siddiqui.jpg" alt="Image Not Loaded"/>
    <img onMouseOver="preview.src=img2.src" id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img8.src" id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
    <img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>

<br/>

</div>

Answer 1

请尝试使用getElementById：

onmouseover="document.getElementById('preview').src=document.getElementById('img8').src"

Answer 2

试试这个，但不要只调用每个图片ID，只需使用“this”。

onmouseover="document.getElementById('preview').src=this.src"

Answer 3

在某些浏览器中，ID会自动转换为javascript变量。在其他人中，如Chrome，他们不是。由于这个确切的原因，假设变量存在是不好的做法。 antyrat的答案应该适合你。

Answer 4

如果您想避免代码中的所有内联JavaScript，我建议您将其全部放在单独的<script> tage或其自己的js文件中。以下是您的代码的样子：

<h1>Photo Gallery</h1><br/>

<div class="thumbnails" id="thumbnails">
    <img id="img1" src="https://www.google.ca/images/srpr/logo11w.png" alt="Image Not Loaded"/>
    <img id="img2" src="images/slide6.jpg" alt="Image Not Loaded"/>
    <img id="img3" src="images/slide1.jpg" alt="Image Not Loaded"/>
    <img id="img4" src="images/slide2.jpg" alt="Image Not Loaded"/>
    <img id="img5" src="images/slide3.jpg" alt="Image Not Loaded"/>
    <img id="img6" src="images/slide4.jpg" alt="Image Not Loaded"/>
    <img id="img7" src="images/slide5.jpg" alt="Image Not Loaded"/>
    <img id="img8" src="images/slide7.jpg" alt="Image Not Loaded"/>
</div><br/>

<div class="preview" align="center">
    <img id="preview" src="images/Salman_Siddiqui.jpg" alt="No Image Loaded"/>
</div>

<br/>

</div>

<script type="text/javascript">
var imgs = document.getElementById('thumbnails').getElementsByTagName('img');
var preview = function(e) {
    document.getElementById('preview').src = document.getElementById(e.target.id).src;
};
for (var i=0, j=imgs.length; i<j; i++) {
    imgs[i].addEventListener('mouseover', preview, false);
}
</script>

编辑： 如果你使用jQuery（因为你标记了它），它就更容易了：

$('#thumbnails > img').hover(function() {
    $('#preview').attr('src', $(this).attr('src'));
});

onmouseover没有在chrome上工作？

4 个答案: