[英]How do I make a gallery where I can hover or a video OR image thumbnail and have a larger image appear?
[英]How can I get the image gallery to change the display image to the thumbnail image?
我该如何通过图库将大图像更改为缩略图图像? 我似乎无法正常工作。 我需要将缩略图的src属性转换为大src属性值的值。
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="CSSChloe.css">
</head>
<body id = "bodyc">
<div id = "space1">
</div>
<div id = "header">
<div class="image">
<img src = "Banner.png" alt= " " width="257" height="43" />
<h4> text</h4>
</div>
</div>
<div id = "space2"> </div>
<div id= "menuBack">
<div id= "menu1"><a href="index.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
<div id= "menu1"><a href="about.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
<div id= "select"><a href="photo.html" style="text-decoration:none;">
<img src = "back.png" alt = " " width = "257" height = "48" style = "position: absolute; left: -14px; top: -5px;" />
<p id = "menu2" style = "position: absolute; margin-top: 2%;">Photo Gallery</p></a>
</div>
<div id= "menu1"><a href="price.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
<div id= "menu1"><a href="testimontials.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
<div id= "menu1"><a href="contact.html" style="text-decoration:none;"><p id = "menu2">link</p></a></div>
<div id= "menu3"><img src ="photographylogo.png" width = "150" height = "125" /></div>
</div>
<div id = "space3"> </div>
<div id= "content">
<div style = "width: 60%; height: 100%; float: left;">
<img id = "big" src ="test1.png" width = "400" height = "350" style = "margin-top: 5%; margin-left: 8%;" />
</div>
<div style = "width: 35%; height: 100%; overflow: auto; float:right;">
<img id = "thumb1" onclick = "thumbFunc('test2.png');" src = "test2.png" width = "150" height = "100" />
<img id = "thumb2" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb3" src = " " width = "150" height = "100" />
<img id = "thumb4" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb5" src = " " width = "150" height = "100" />
<img id = "thumb6" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb7" src = " " width = "150" height = "100" />
<img id = "thumb8" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb9" src = " " width = "150" height = "100" />
<img id = "thumb10" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb11" src = " " width = "150" height = "100" />
<img id = "thumb12" src = " " width = "150" height = "100" />
<br/>
<img id = "thumb13" src = " " width = "150" height = "100" />
<img id = "thumb14" src = " " width = "150" height = "100" />
</div>
</div>
<script>
function thumbFunc(a)
{
document.getElementById("big").setAttribute(src, a);
}
</script>
</body>
</html>
首先,更改在线单击时调用函数的方式:
onclick="thumbFunc('test2.png');"
这样做,因此您不必再次放置图像路径:
onclick="thumbFunc(this.src)"
然后,更改您的JavaScript:
document.getElementById("big").setAttribute(src, a);
为此(如果您更喜欢简单的方法):
document.getElementById("big").src = a;
或者,如果您仍要坚持使用setAttribute
方法,请不要忘记将属性(src)括在"
符号中:
document.getElementById("big").setAttribute("src", a);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.