打印

[教程] 用图片模拟checkbox，简简单单。

snwebsite [楼主]

蓝色怪兽

荣誉管理团队

帖子: 4345
体力: 7370
威望: 68

1^# 大中小发表于 2007-5-19 10:04

相信大家一下就能看明白，还是书签的应用，这里IE表现比较笨，要用到onclick。。

另一种CSS的方法。(需要CSS2、3的部分支持)

例子：(FF下代码另存为查看)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>51css</title>
<style type="text/css">
/*<![CDATA[*/
a,label {
	display:block;
	width:25px;
	height:25px;
	overflow:hidden
	}
a {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_82a5f3ae0299b6163a2cLk3uyVuFSv9J.gif") no-repeat
	}
a:hover {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_be7c34d5508e4167e06crax6MCxxJrE7.gif") no-repeat
	}
a#b {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_15613fd58c27b7022bb2fCqNnqRCmtIn.gif") no-repeat
	}
/*]]>*/
</style>
</head>
<body>
<label for="cc">
		<a href="#b" id="a" onclick="cc.checked=true"></a>
		<a href="#a" id="b" onclick="cc.checked=false"></a>
		<input type="checkbox" id="cc" />
</label>
</body>
</html>

提示：您可以先修改部分代码再运行

将 checkbox 拿出来，大家看着直观点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>51css</title>
<style type="text/css">
/*<![CDATA[*/
a,label {
	display:block;
	width:25px;
	height:25px;
	overflow:hidden
	}
a {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_82a5f3ae0299b6163a2cLk3uyVuFSv9J.gif") no-repeat
	}
a:hover {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_be7c34d5508e4167e06crax6MCxxJrE7.gif") no-repeat
	}
a#b {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_15613fd58c27b7022bb2fCqNnqRCmtIn.gif") no-repeat
	}
/*]]>*/
</style>
</head>
<body>
<label for="cc">
		<a href="#b" id="a" onclick="cc.checked=true"></a>
		<a href="#a" id="b" onclick="cc.checked=false"></a>
</label>
		<input type="checkbox" id="cc" />
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 snwebsite 于 2007-5-19 10:12 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

本帖最近评分记录

jxdawei 威望 +2 好创意！ 2007-5-19 12:28

LOST - FRINGE

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

old9

银牌会员

帖子: 583
体力: 960
威望: 87
当前: 安徽合肥

专长 网页设计,前端制作,AS

2^# 大中小发表于 2007-5-19 10:29

妙哉妙哉～
真是创意无限，大赞

http://old9.blogsome.com 已被 GFW 封锁

TOP

美橙vps独立IP月付189元

richie214

中级会员

帖子: 97
体力: 237
威望: 0
当前: 福建福州
离线: 3 天

3^# 大中小发表于 2007-5-19 11:32

不错，不过禁用JS后就郁闷了。。

动态网页技术交流群：16449874]

TOP

中央美院远程平面设计进修班

huerreson

弦上毛虫

银牌会员

帖子: 691
体力: 2492
威望: 1
当前: 浙江金华
离线: 2 天

专长 前端制作,ASP,C#

4^# 大中小发表于 2007-5-19 16:20

我以前也模拟过radio

[ 本帖最后由 huerreson 于 2007-5-19 16:28 编辑 ]

弦上毛虫的网

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

huerreson

弦上毛虫

银牌会员

帖子: 691
体力: 2492
威望: 1
当前: 浙江金华
离线: 2 天

专长 前端制作,ASP,C#

5^# 大中小发表于 2007-5-19 16:33

早期我的版本

提示：您可以先修改部分代码再运行

[ 本帖最后由 huerreson 于 2007-5-19 16:35 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

弦上毛虫的网

TOP

zbm2001z

宝儿

荣誉管理团队

帖子: 1526
体力: 3931
威望: 41
当前: 北京昌平区
离线: 2 天

专长 网页设计,Flash,JS

6^# 大中小发表于 2007-5-19 23:20

局限性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>51css</title>
<style type="text/css">
/*<![CDATA[*/
a,label {
	display:block;
	width:25px;
	height:25px;
	overflow:hidden
	}
a {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_82a5f3ae0299b6163a2cLk3uyVuFSv9J.gif") no-repeat
	}
a:hover {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_be7c34d5508e4167e06crax6MCxxJrE7.gif") no-repeat
	}
a#b {
	background:url("http://bbs.blueidea.com/attachments/2007/5/19/20070519_15613fd58c27b7022bb2fCqNnqRCmtIn.gif") no-repeat
	}
/*]]>*/
</style>
</head>
<body>
<div style="height:500px;background:#ff0"></div>
<label for="cc">
		<a href="#b" id="a" onclick="cc.checked=true"></a>
		<a href="#a" id="b" onclick="cc.checked=false"></a>
		<input type="checkbox" id="cc" />
</label>
<div style="height:500px;background:#ff0"></div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

xingesoft

中级会员

帖子: 104
体力: 202
威望: 0
离线: 45 天

7^# 大中小发表于 2007-5-21 10:02

没必要，何必呢！

设计天空:http://www.sjsky.net

TOP

YanKaven

新手上路

帖子: 54
体力: 11
威望: 2
离线: 99 天

8^# 大中小发表于 2007-5-21 10:34

创意是蛮好的，呵呵实用性上还需要想想办法，正如6楼举的那个例子，由于利用锚点的原因，只要锚点不处于浏览器可视区域的最顶端，而锚点后面的内容大于一屏高度，那么就会出现跳跃现象。

随网之舞

TOP

webdesigning

风无双

金牌会员

帖子: 1966
体力: 3651
威望: 1
当前: 上海浦东
离线: 3 天

9^# 大中小发表于 2007-5-21 14:38

第一次使用总是慢慢的，不真实！

www.5study.net www.websdeveloper.cn

TOP

gulu77

高级会员

帖子: 286
体力: 518
威望: 8
当前: 广东广州
离线: 3 天

10^# 大中小发表于 2007-7-8 14:33

怎么不能兼容两个或以上的checkbox 啊？

gulu77.com

TOP

Lobin

初级会员

帖子: 42
体力: 92
威望: 0
离线: 379 天

11^# 大中小发表于 2007-7-8 14:36

学习中，收藏研究

TOP