我正在制作一个简单的照片库，目前当用户将鼠标悬停在缩略图上时，会在其下方显示放大的照片。
我还希望当用户覆盖缩略图时，我希望在白色文本框中显示一些文本。每个缩略图都应该有不同的描述。我想要一个JavaScript代码帮助，因为我不熟悉j查询。
这是我的代码，帮助赞赏！
<!DOCTYPE html>
<head>
<title>Gallery</title>
<style type="text/css">
body {
margin-top: 100px;
}
input {
height: 40px;
word-wrap: break-word;
}
.thumbnails img {
height: 100px;
border: 4px solid #151515;
padding: 1px;
margin: 0 10px 10px 0;
margin-top: 40px;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #151515;
padding: 1px;
width: 800px;
}
a:hover + input {
display: block;
}
</style>
</head>
<body>
<body bgcolor="#CCCCCC">
<form name="bgcolorForm" >
<select onChange="if(this.selectedIndex!=0)
document.bgColor=this.options[this.selectedIndex].value">
<option value="choose">Set background color
<option value="c8e4f8">Blue
<option value="CCCCCC">Grey
<option value="FFFFFF">White
<option value="FBFBEF">Cream
</select>
</form>
<br>
<form id="font_form">
<select id ="font" onChange="setFont()">
<option value="choose">Set font style
<option style="font-family: 'Verdana'">Verdana</option>
<option style="font-family: Arial">Arial</option>
<option style="font-family: 'Times New Roman'">Times New Roman</option>
</select>
</form>
<div class="preview" align="center">
<img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>
</br>
</div>
<input style="width:800px" id="Text" type="text" float="right" value="Text"/>
<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>
<script type="text/javascript">
var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (i = 0; i < images.length; i++) {
images[i].onmouseover = function () {
document.getElementById('preview').src = this.src;
}
}
function setFont()
{
var selectFont = document.getElementById("font");
if (selectFont) {
var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
if (selectFontValue == "Verdana") {
document.getElementById("Text").style.font = "20px Verdana, sans-serif";
}
else if (selectFontValue == "Arial") {
document.getElementById("Text").style.font = "20px Arial,sans-serif";
}
else if (selectFontValue == "Times New Roman") {
document.getElementById("Text").style.font = "20px Times New Roman,serif";
}
else {
document.getElementById("Verdana").style.font = "20px Verdana, sans-serif";
}
}
}
</script>
</body>
</html>
答案 0 :(得分：0)
您应该使用数据属性，基本上这是它的工作方式：
<img src="http://lorempixel.com/100/100/nature/6"
data-full="http://lorempixel.com/300/300/nature/6"
data-small="http://lorempixel.com/100/100/nature/6"
onmouseover="this.src=this.getAttribute('data-full');"
onmouseout="this.src=this.getAttribute('data-small')"
/>