请选择进入手机版 | 继续访问电脑版

收藏本站腾讯微博新浪微博

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

蓝色理想最新研发动态 用悬赏三天解决问题解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动地图任务 邮件更新任务:保护帐号安全

积分换实物，来参加蓝色理想积分兑换吧！ 联系招聘客服蓝色理想帮你找工作！ 万元奖励等你拿——点点网模板设计大赛

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 用图片模拟checkbox，简简单单。

发新帖

查看: 10080|回复: 15

[教程] 用图片模拟checkbox，简简单单。 [复制链接]

snwebsite　楼主

蓝色怪兽

帖子: 4347
体力: 14380
威望: 69
居住地: 香港特别行政区湾仔区

发表于 2007-5-19 10:04:34 |显示全部楼层

相信大家一下就能看明白，还是书签的应用，这里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 编辑 ]

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

已有 1 人评分	威望	收起理由
jxdawei	+ 2	好创意！

总评分: 威望 + 2 查看全部评分

西部数码顶级域名注册商39元抢注！

使用道具举报

old9　

银牌会员 

帖子: 653
体力: 1762
威望: 88
居住地: 安徽省合肥市

发表于 2007-5-19 10:29:02 |显示全部楼层

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

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

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

帖子: 119
体力: 290
威望: 0
居住地: 福建省福州市

发表于 2007-5-19 11:32:52 |显示全部楼层

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

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

使用道具举报

弦上毛虫

金牌会员 

帖子: 691
体力: 3514
威望: 1
居住地: 浙江省金华市

发表于 2007-5-19 16:20:49 |显示全部楼层

我以前也模拟过radio

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

弦上毛虫的网

使用道具举报

弦上毛虫

金牌会员 

帖子: 691
体力: 3514
威望: 1
居住地: 浙江省金华市

发表于 2007-5-19 16:33:05 |显示全部楼层

早期我的版本

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

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

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

弦上毛虫的网

使用道具举报

宝儿

帖子: 1600
体力: 11357
威望: 43

发表于 2007-5-19 23:20:03 |显示全部楼层

局限性：

<!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>

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

使用道具举报

帖子: 109
体力: 430
威望: 0

发表于 2007-5-21 10:02:47 |显示全部楼层

没必要，何必呢！

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

使用道具举报

帖子: 60
体力: 8
威望: 2

发表于 2007-5-21 10:34:12 |显示全部楼层

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

使用道具举报

webdesigning　

风无双

钻石会员 

帖子: 1979
体力: 6800
威望: 1
居住地: 广东省深圳市

发表于 2007-5-21 14:38:52 |显示全部楼层

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

使用道具举报

帖子: 297
体力: 1080
威望: 13
居住地: 广东省广州市

发表于 2007-7-8 14:33:13 |显示全部楼层

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

使用道具举报

帖子: 42
体力: 97
威望: 0

发表于 2007-7-8 14:36:06 |显示全部楼层

学习中，收藏研究

使用道具举报

帖子: 514
体力: 1146
威望: 0
居住地: 广东省深圳市

发表于 2008-11-28 10:19:19 |显示全部楼层

多个checkbox呢怎么弄啊

使用道具举报

xund　

新手上路 

帖子: 2
体力: 19
威望: 0

发表于 2010-4-19 11:09:50 |显示全部楼层

这个实用性不强，当连续快速的点击时，会出现显示的图标与checkbox input状态不同步现象

使用道具举报

帖子: 871
体力: 2942
威望: 1
居住地: 重庆市渝北区

发表于 2010-4-19 11:37:00 |显示全部楼层

网上有JS的插件。

成长中...

使用道具举报

帖子: 685
体力: 1944
威望: 0

发表于 2010-4-19 11:43:28 |显示全部楼层

是个不错的创意想法我感觉不是很实用再说可能在兼容上海有些问题，那样就划不来了。

我的个人博客www.xh-css.cn

使用道具举报

吃了睡

帖子: 335
体力: 789
威望: 4
居住地: 浙江省杭州市

发表于 2010-4-19 14:42:20 |显示全部楼层

这跟以前有个帖子的创意一样，记得是个很早的帖子，不过实用性不强。ls也说了，多个怎么办呢？？？

每个{前端开发者}上辈子都是{折翼的天使} IE6你伤不起

使用道具举报

发新帖

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )

GMT+8, 2012-2-11 02:37 , Processed in 0.112744 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部