打印

给展示性图片增加提示工具条

misshjn [楼主]

中级会员

帖子: 198
体力: 364
威望: 4
离线: 13 天

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

TOP

做西部数码代理.Cn1元国际45元

itom

初级会员

帖子: 69
体力: 136
威望: 0
离线: 469 天

2^# 大中小发表于 2006-11-28 10:34

顶好

:)

TOP

【美橙超级G空间】688元绑定10个子目录 | 500M免费网盘空间，文件永久保留，专业服务高端设计人员

yoking

新手上路

帖子: 23
体力: 49
威望: 0
离线: 15 天

3^# 大中小发表于 2006-11-28 14:34

不错，挺实用的

TOP

请大家尊重和保护奥运知识产权。

liangtianyou

新手上路

帖子: 23
体力: 40
威望: 0
离线: 49 天

4^# 大中小发表于 2006-11-29 09:19

好东东阿
顶一下了

TOP

您知道经典哪些会员写过书的吗？

您知道互联网职业和技能有哪些吗？

您知道网站运营核心是什么吗？

manhere

中级会员

帖子: 126
体力: 231
威望: 0
离线: 10 天

5^# 大中小发表于 2006-11-29 10:56

第一个图片和最后一个图片不能显示图片放大的工具，只有黑白工具测试用opera 9.0

TOP

angin

禁止发言

帖子: 12
体力: 25
威望: 0
离线: 528 天

6^# 大中小发表于 2006-12-3 01:13

不错　实用！
建议另外一个效果还实用（黑白图片鼠标移上去变成彩色的）

安静

TOP

coffeekor

中级会员

帖子: 159
体力: 242
威望: 0
离线: 100 天

7^# 大中小发表于 2007-5-4 18:12

赞楼主一个，认真学习下

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 编辑 ]

TOP