主站
经典论坛
作品集
Think.Pages
博客
维基
桌面
聚合
注册
登录
专长会员
帮助
客服QQ:6650171
经典论坛
»
前台制作与脚本专栏
» 给展示性图片增加提示工具条
‹‹ 上一主题
|
下一主题 ››
发新话题
发布投票
发布商品
发布悬赏
发布活动
发布辩论
发布视频
打印
给展示性图片增加提示工具条
misshjn
[楼主]
中级会员
帖子
198
体力
364
威望
4
离线
13 天
发短消息
加为好友
打分 3
1
#
大
中
小
发表于 2006-11-16 23:14
用在产品内容展示的页面上,给产品图片加上提示工具条,效果还是不错的:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>happyshow.org</title> <style> img {display:block} #imgBox { } #imgBox li {list-style-type:none; margin:10px;position:relative; float:left; border:1px solid #999; padding:1px} .showimg {width:200px; height:150px;} .toolbar {width:16px; height:16px; position:absolute; display:none; left:10px; top:10px} .maxImg {bottom:5px; right:5px; position:absolute; display:none; cursor:hand; background-color:transparent; padding:0; border:none} </style> </head> <body> <h1>给展示性图片增加提示工具条</h1> <div style="font-size:14px; color:#999">把鼠标停留在图片上</div> <ul id="imgBox"> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0573.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0575.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0578.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0580.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0566.GIF"></li> </ul> <script type="text/javascript"> var imgBox = document.getElementById("imgBox"); var li = imgBox.getElementsByTagName("li"); for (i=0; j=li[i]; i++){ j.onmouseover = function(){this.getElementsByTagName('div')[0].style.display='block';this.getElementsByTagName('button')[1].style.display='block';} j.onmouseout = function(){this.getElementsByTagName('div')[0].style.display='none';this.getElementsByTagName('button')[1].style.display='none';} j.getElementsByTagName("img")[0].className = "showimg"; var toolbars = '<div class="toolbar"><button class="imgtoolbar1" onclick="var img2 = this.parentNode.parentNode.getElementsByTagName(\'img\')[0]; img2.style.filter==\'\'?img2.style.filter=\'Gray()\':img2.style.filter=\'\'"><img src="http://www.happyshow.org/sample/20061116/gray.gif" title="黑白反转"></button></div>'; toolbars+= '<button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="http://www.happyshow.org/sample/20061116/big.gif" title="查看大图" /></button>'; j.innerHTML += toolbars; } </script> <strong style="display:block; clear:both; font-size:12px; font-family:Tahoma"><a href="http://www.happyshow.org" target="_blank">@happyshow.org</a></strong> </body> </html>
提示:您可以先修改部分代码再运行
本帖最近评分记录
hutia
威望
+1
原创内容,创意不错
2006-12-3 11:19
------ 我的博客 ------
http://www.happyshow.org
积分
368
阅读权限
30
在线时间
144 小时
注册时间
2005-12-9
最后登录
2008-8-8
查看详细资料
TOP
做西部数码代理.Cn1元国际45元
itom
初级会员
帖子
69
体力
136
威望
0
离线
469 天
发短消息
加为好友
2
#
大
中
小
发表于 2006-11-28 10:34
顶好
:)
积分
136
阅读权限
20
在线时间
31 小时
注册时间
2006-11-3
最后登录
2007-5-11
查看详细资料
TOP
【美橙超级G空间】688元绑定10个子目录
|
500M免费网盘空间,文件永久保留,专业服务高端设计人员
yoking
新手上路
帖子
23
体力
49
威望
0
离线
15 天
发短消息
加为好友
3
#
大
中
小
发表于 2006-11-28 14:34
不错,挺实用的
积分
49
阅读权限
10
在线时间
113 小时
注册时间
2006-6-5
最后登录
2008-8-7
查看详细资料
TOP
请大家尊重和保护奥运知识产权。
liangtianyou
新手上路
帖子
23
体力
40
威望
0
离线
49 天
发短消息
加为好友
4
#
大
中
小
发表于 2006-11-29 09:19
好东东阿
顶一下了
积分
40
阅读权限
10
在线时间
8 小时
注册时间
2006-8-14
最后登录
2008-7-4
查看详细资料
TOP
您知道经典
哪些会员写过书的
吗?
您知道互联网
职业和技能有哪些
吗?
您知道
网站运营核心是什么
吗?
manhere
中级会员
帖子
126
体力
231
威望
0
离线
10 天
发短消息
加为好友
5
#
大
中
小
发表于 2006-11-29 10:56
第一个图片和最后一个图片不能显示图片放大的工具,只有黑白工具 测试用opera 9.0
积分
231
阅读权限
30
在线时间
186 小时
注册时间
2006-11-10
最后登录
2008-8-12
查看详细资料
TOP
angin
禁止发言
帖子
12
体力
25
威望
0
离线
528 天
个人网站
发短消息
加为好友
6
#
大
中
小
发表于 2006-12-3 01:13
不错 实用!
建议另外一个效果还实用(黑白图片鼠标移上去变成彩色的)
安静
积分
25
阅读权限
1
性别
男
在线时间
30 小时
注册时间
2006-12-2
最后登录
2007-3-13
查看个人网站
查看详细资料
TOP
coffeekor
中级会员
帖子
159
体力
242
威望
0
离线
100 天
发短消息
加为好友
7
#
大
中
小
发表于 2007-5-4 18:12
赞楼主一个,认真学习下
积分
242
阅读权限
30
在线时间
182 小时
注册时间
2007-4-19
最后登录
2008-5-13
查看详细资料
TOP
lixdot
新手上路
帖子
8
体力
22
威望
0
离线
1 天
发短消息
加为好友
8
#
大
中
小
发表于 2007-5-4 21:14
学习一下 改成黑白图片鼠标移上去变成彩色的当作业了
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>happyshow.org</title> <style> img {display:block} #imgBox { } #imgBox li {list-style-type:none; margin:10px;position:relative; float:left; border:1px solid #999; padding:1px} .showimg {width:200px; height:150px;filter:Gray();s} .toolbar {width:16px; height:16px; position:absolute; display:none; left:10px; top:10px} .maxImg {bottom:5px; right:5px; position:absolute; display:none; cursor:hand; background-color:transparent; padding:0; border:none} </style> </head> <body> <h1>给展示性图片增加提示工具条</h1> <div style="font-size:14px; color:#999">把鼠标停留在图片上</div> <ul id="imgBox"> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0573.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0575.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0578.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0580.GIF"></li> <li><img src="http://www.happyshow.org/sample/20061116/xpbz0566.GIF"></li> </ul> <script type="text/javascript"> var imgBox = document.getElementById("imgBox"); var li = imgBox.getElementsByTagName("li"); for(i=0;j=li[i];i++){ j.getElementsByTagName("img")[0].className = "showimg"; j.onmouseover=function(){ this.getElementsByTagName('img')[0].style.filter=''; this.getElementsByTagName('div')[0].style.display='block'; this.getElementsByTagName('button')[0].style.display='block';} j.onmouseout=function(){ this.getElementsByTagName('img')[0].style.filter="Gray();" this.getElementsByTagName('div')[0].style.display='none'; this.getElementsByTagName('button')[0].style.display='none';} var toolbars = '<div></div><button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="http://www.happyshow.org/sample/20061116/big.gif" title="查看大图" /></button>'; j.innerHTML += toolbars; } </script> </body> </html>
提示:您可以先修改部分代码再运行
[
本帖最后由 lixdot 于 2007-5-4 21:47 编辑
]
积分
22
阅读权限
10
在线时间
166 小时
注册时间
2007-2-16
最后登录
2008-8-21
查看详细资料
TOP
‹‹ 上一主题
|
下一主题 ››
版块跳转
内部交流区
网站开发区
前台制作与脚本专栏
后台数据库编程
WEB标准化专栏
WAP 技术专栏
平面设计区
艺术与设计论坛
Adobe Photoshop 专栏
Fireworks 专栏
矢量图形专栏
插画手绘交流
交互设计区
用户体验综合版
UI图形设计
RIA设计与应用
Flash 8 及之前版本
Flash CS3 及 AS3
Silverlight 专版
Director 专栏
其它技术讨论区
计算机技术
英语学习和技术翻译
摄影欣赏与技术交流
无线通讯与数码设备
信息平台
企业招聘
学习工作交流区
创业版