请问如何实现点击小图片,可以在下面的表格上显示出相关的大图片?
小图片与大图片的文件名的关系为:
想要的效果如下图:
小图片1 | 小图片2 | 小图片3
|---------------------------------|
| |
| |
| 大 图 片 |
| |
| |
|---------------------------------|
实现方法(以下代码是我的一个朋友菜菜写的,转载请注明,结合自身用的语言发挥!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片</title>
<script type="text/javascript">
function showPic(whichpic)
{
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</head>
<body>
<ul>
<li><a href="images/01.jpg" onclick="showPic(this); return false;"><img src="images/01.jpg" /></a></li>
<li><a href="images/02.jpg" onclick="showPic(this); return false;"><img src="images/02.jpg" /></a></li>
<li><a href="images/03.jpg" onclick="showPic(this); return false;"><img src="images/03.jpg" /></a></li>
</ul>
<img />
</body>
</html>