用在产品内容展示的页面上，给产品图片加上提示工具条，鼠标移动图片上即可看到效果，效果还是不错的：
带黑白效果和放大图片效果(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="/article/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="/article/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="/article/UploadPic/200710/20/20071020142730248.gif" title="黑白反转"></button></div>'; toolbars+= '<button class="maxImg" onclick="window.open(this.parentNode.getElementsByTagName(\'img\')[0].src)"><img src="/article/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> [提示：你可先修改部分代码，再按运行]
学习一下 改成黑白图片鼠标移上去变成彩色的当作业了(by lixdot )
<!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="/article/UploadPic/200710/20/20071020142716231.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142727891.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142727803.GIF"></li> <li><img src="/article/UploadPic/200710/20/20071020142728941.GIF"></li> <li><img src="/article/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="/article/UploadPic/200710/20/20071020142731726.gif" title="查看大图" /></button>'; j.innerHTML += toolbars; } </script> </body> </html> [提示：你可先修改部分代码，再按运行]
请稍等，评论加载中...