62,046
社区成员
发帖
与我相关
我的任务
分享点击缩略图在指定的地方显示对应的大图!
http://www.wodetiankong.com/product.aspx
这是产品页面,点击产品名称进入产品详细页面.因为上传的时候就是同时传三张大图,然后再生成三张小的缩略图,三张大图和对应的三张缩略图的文件名都写进了数据库.在查看产品详细信息的时候,上面三张小的是从数据库直接读出来的,然后剩下的就是在三张小图的下面的一个表的单元格中显示大图,条件是:点击缩略图,在单元格显示对应的大图!
请问如何实现点击小图片，可以在下面的表格上显示出相关的大图片？
小图片与大图片的文件名的关系为：
想要的效果如下图：
小图片1 | 小图片2 | 小图片3
|---------------------------------|
| |
| |
| 大 图 片 |
| |
| |
|---------------------------------|
这是产品页面,点击产品名称进入产品详细页面.因为上传的时候就是同时传三张大图,然后再生成三张小的缩略图,三张大图和对应的三张缩略图的文件名都写进了数据库.在查看产品详细信息的时候,上面三张小的是从数据库直接读出来的,然后剩下的就是在三张小图的下面的一个表的单元格中显示大图,条件是:点击缩略图,在单元格显示对应的大图!
请问如何实现点击小图片，可以在下面的表格上显示出相关的大图片？
小图片与大图片的文件名的关系为：
想要的效果如下图：
小图片1 | 小图片2 | 小图片3
|---------------------------------|
| |
| |
| 大 图 片 |
| |
| |
|---------------------------------|
...全文
请发表友善的回复…
发表回复
yjf_1982 2007-04-26
- 打赏
- 举报
up
qingzhouboy 2007-04-05
- 打赏
- 举报
自己实现了
qingzhouboy 2007-04-05
- 打赏
- 举报
<!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 id="placeholder" src="images/01.jpg" alt="my image gallery" />
</body>
</html>
<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 id="placeholder" src="images/01.jpg" alt="my image gallery" />
</body>
</html>
aliketen 2007-04-02
- 打赏
- 举报
哈哈
拷这个站的样式js代码就可以
http://www.pierotucci.com
拷这个站的样式js代码就可以
http://www.pierotucci.com
qingzhouboy 2007-04-02
- 打赏
- 举报
高手帮忙看看!
qingzhouboy 2007-04-02
- 打赏
- 举报
1、一次取出所有的图片的文件名和路径，然后js搞定；
2、不一次全部读出，ajax，但似乎没必要。
一次取出所有的文件名和路径好办,可是JS如何来写我不会!
(2007-04-02 10:30:36) 无名(526888)
做JS做,当点击了小图片,然后用大图片的路径替换小图片的src
高人指点的思路,无奈js水平太菜!js如何结合image控件来做的代码js高手能否写出一段来参考,再次感谢!
2、不一次全部读出，ajax，但似乎没必要。
一次取出所有的文件名和路径好办,可是JS如何来写我不会!
(2007-04-02 10:30:36) 无名(526888)
做JS做,当点击了小图片,然后用大图片的路径替换小图片的src
高人指点的思路,无奈js水平太菜!js如何结合image控件来做的代码js高手能否写出一段来参考,再次感谢!
indure 2007-04-02
- 打赏
- 举报
1、一次取出所有的图片的文件名和路径，然后js搞定；
2、不一次全部读出，ajax，但似乎没必要。
2、不一次全部读出，ajax，但似乎没必要。
