给展示性图片增加提示工具条(黑白效果)

来源：蓝色理想时间：2007-10-20 14:21:00　

用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：

带黑白效果和放大图片效果(by misshjn):

<!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>给展示性图片增加提示工具条(黑白效果) - asp之家</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="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142729625.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="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142730248.gif" title="黑白反转"></button></div>'; toolbars+= '<button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142731726.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>

<!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>给展示性图片增加提示工具条(黑白效果)</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="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142729625.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="https://img.aspxhome.com/file/UploadPic/200710/20/20071020142731726.gif" title="查看大图" /></button>'; j.innerHTML += toolbars; }</script></body></html>

标签：工具条,图片

投稿

给展示性图片增加提示工具条(黑白效果)

猜你喜欢

ASP中Session技巧默认过期时间为20分钟

43个应当避免的Web设计错误

SQL Server数据库备份出错及应对措施

QCon大会散记

常用SQL语句词典

sqlserver 三种分页方式性能比较[图文]

CSS雪碧:要还是不要？

JMail（4.3版本）发信asp代码

对抗MySQL数据库解密高手

Web 标准要求一览表

悟透JavaScript

亚马逊购物用户体验分析(三)

对SQL Server数据库进行优化的经验总结

MySQL手动安装方法与中文解决方案

mysql中普通索引和唯一索引的效率对比

ASP返回某年总共有多少天的代码

有关asp的系统变量ServerVariables (“HTTP_USER_AGENT“)？

配置SQL Server文件组对应不同的RAID系统

区别Javascript中的Null与Undefined

Oracle数据库快照的使用

给展示性图片增加提示工具条(黑白效果)

猜你喜欢

ASP中Session技巧 默认过期时间为20分钟

43个应当避免的Web设计错误

SQL Server数据库备份出错及应对措施

QCon大会散记

常用SQL语句词典

sqlserver 三种分页方式性能比较[图文]

CSS雪碧:要还是不要？

JMail（4.3版本）发信asp代码

对抗MySQL数据库解密高手

Web 标准要求一览表

悟透JavaScript

亚马逊购物用户体验分析(三)

对SQL Server数据库进行优化的经验总结

MySQL手动安装方法与中文解决方案

mysql中普通索引和唯一索引的效率对比

ASP返回某年总共有多少天的代码

有关asp的系统变量ServerVariables (“HTTP_USER_AGENT“)？

配置SQL Server文件组对应不同的RAID系统

区别Javascript中的Null与Undefined

Oracle数据库快照的使用

ASP中Session技巧默认过期时间为20分钟