我正在使用 html 和 css 制作一个简单的图库页面。我将它编码到一个 html 查看器上并且它工作正常但是当我在谷歌浏览器和 IE 中打开它时 onmouseover 不工作。当您浏览选定的缩略图时，它应该会在底部框中显示更大的图像，但它不起作用。
我之前发过这个问题，得到了很好的回复。我想问问是否有人可以给我一个普通的 javascript 代码，我需要输入它才能完成这项工作。我有这个代码，有人好心地给了它，但如果可能的话，我只想要一个 java 脚本代码。
$(function(){
$('.thumbnails img').hover(function(){
$('#preview').attr('src',$(this).attr('src'));
},null);
});
谢谢大家!
<!DOCTYPE html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
background: #222;
margin-top: 100px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 100px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}
</style>
</head>
<body>
<div class="gallery" align="center">
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg" alt="Image Not Loaded"/>
</div></br>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>
</body>
</html>
最佳答案
这是您画廊的普通 JS 版本:
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
images[i].onmouseover = function () {
document.getElementById('preview').src = this.src;
}
}
在这里查看它的工作情况:http://jsfiddle.net/2AM2N/5/
更新
以下是如何使用 alt 属性的描述:
document.getElementById('desc').innerHTML = this.alt; // this goes inside our loop
这是一个活生生的例子:http://jsfiddle.net/2AM2N/6/
关于我的图片库的 JavaScript 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22580267/