产品页面,点击产品名称进入产品详细页面.因为上传的时候就是同时传三张大图,然后再生成三张小的缩略图,三张大图和对应的三张缩略图的文件名都写进了数据库.在查看产品详细信息的时候,上面三张小的是从数据库直接读出来的,然后剩下的就是在三张小图的下面的一个表的单元格中显示大图,条件是:点击缩略图,在单元格显示对应的大图!

  请问如何实现点击小图片,可以在下面的表格上显示出相关的大图片?
  小图片与大图片的文件名的关系为:

  想要的效果如下图:

  小图片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>

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-07
  • 2021-07-08
  • 2021-05-26
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-05-06
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-07-07
相关资源
相似解决方案