Javascript 如何在鼠标悬停的照片下方添加说明?(图片集)
我正在制作一个简单的照片库,当用户将鼠标悬停在缩略图上时,下面会显示一张放大的照片 我还希望,当用户浏览缩略图时,我希望在白色文本框中显示一些文本。每个缩略图应有不同的描述。我想要一个JavaScript代码帮助,因为我不熟悉j query 这是我的代码,谢谢你的帮助Javascript 如何在鼠标悬停的照片下方添加说明?(图片集),javascript,html,css,Javascript,Html,Css,我正在制作一个简单的照片库,当用户将鼠标悬停在缩略图上时,下面会显示一张放大的照片 我还希望,当用户浏览缩略图时,我希望在白色文本框中显示一些文本。每个缩略图应有不同的描述。我想要一个JavaScript代码帮助,因为我不熟悉j query 这是我的代码,谢谢你的帮助 <!DOCTYPE html> <head> <title>Gallery</title> <style type="text/css"> body { margi
<!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>
画廊
身体{
边缘顶部:100px;
}
输入{
高度:40px;
单词包装:打断单词;
}
.缩略图{
高度:100px;
边框:4px实心#151515;
填充:1px;
利润率:0 10px 10px 0;
边缘顶端:40px;
}
.缩略图img:悬停{
边框:4px实心#00ccff;
光标:指针;
}
.预览img{
边框:4px实心#151515;
填充:1px;
宽度:800px;
}
a:悬停+输入{
显示:块;
}
设置背景色
蓝色
灰色
白色
奶油
设置字体样式
威尔达纳
Arial
新罗马时代
var images=document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
对于(i=0;i
您应该使用数据属性,基本上它是这样工作的:
对于所有的tat代码,jsfiddle.net with将是非常好的。我担心setFont()函数不能像您希望的那样工作,因为您必须具有唯一的id。。。
<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')"
/>