用图片代替表单的单选、复选按钮_表单按钮特效

特效Tag：添加

用图片代替传统的单选框及复选框，经过测试，兼容IE6、IE7、IE8和FF3.5，其它版本或其它浏览器未测试。复选框和单选框调用的是一张背景图片，如果没看到效果请刷新页面或等待一会。
　　

<title>用图片代替表单的单选、复选按钮</title>
<style type="text/css">
fieldset {
margin:5px;
padding:0 12px 12px 12px;
border:1px solid #D4D4D4;
}
legend {
	font-weight:bold;
}
</style>
<script language="javascript" type="text/javascript">
/*	@作者		: Enjoyd
 *	@OICQ		: 5003427*/
function getid(id){return document.getElementById(id);}
function gettag(tag,obj){if(obj){return obj.getElementsByTagName(tag)}else{return document.getElementsByTagName(tag)}}
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!="function"){window.onload=func;}else{window.onload=function(){oldonload();func();}};}
function SetBgPos(obj,x,y){
	var isIE = (navigator.userAgent.indexOf("MSIE") != -1);  
	if(isIE){obj.style.backgroundPositionX=x;obj.style.backgroundPositionY=y;}
	else{obj.style.backgroundPosition=x+' '+y;}
}
function LoadCheckBox(){
if(gettag("input")){
	var r=gettag("input");
	function select_element(obj){
	c=obj.checked;d=obj.disabled;
	if(obj.type=="checkbox"){SetBgPos(obj.parentNode,0,(c)?((d)?"-550px":"-450px"):((d)?"-400px":"-300px"));}
	else{SetBgPos(obj.parentNode,0,(c)?((d)?"-250px":"-150px"):((d)?"-100px":"0"));}
	}
	for(var i=0;i<r.length;i++){
	if(r[i].type=="radio"||r[i].type=="checkbox"){
		if(r[i].parentNode.tagName=='SPAN'){
		r[i].style.opacity=0;r[i].style.filter="alpha(opacity=0)";
		r[i].parentNode.style.cssText='1122123<img src=http://p1.mb5u.com/texiao/5/20100522231603335.gif>2244234background:url(http://p1.mb5u.com/texiao/5/20100522231603335.gif) no-repeat;display:inline-block;width:16px;height:16px;vertical-align:top;';
		}
		r[i].onclick=function(){select_element(this);unfocus();}
		select_element(r[i]);
		}
	}	
	function unfocus(){for(var i=0;i<r.length;i++){if(r[i].type=="radio"||r[i].type=="checkbox"){select_element(r[i]);}}}
}
}
addLoadEvent(LoadCheckBox);
</script>
<span><input type="radio" value="1" name="rtest" id="rtest1" /></span><label for="rtest1">ASP</label>
<span><input type="radio" value="2" name="rtest" id="rtest2" disabled="disabled" checked="checked" /></span><label for="rtest2">PHP</label>
<hr />
<span><input type="checkbox" value="1" name="test" id="test1" /></span><label for="test1">ASP</label>
<span><input type="checkbox" value="2" name="test" id="test2" disabled="disabled" checked="checked" /></span><label for="test2">PHP</label>
<hr />
<input type="checkbox" value="1" name="asfd2" id="asdf" /><label for="asdf">ASP</label>
<input type="radio" value="1" name="rtest2" id="qwer" /></span><label for="qwer">PHP</label>
</fieldset>

所属频道：表单按钮特效/更新时间：2012-11-24

[收藏][报错][返回列表]

用图片代替表单的单选、复选按钮_表单按钮特效

表单按钮特效Rss订阅特效代码搜索

表单按钮特效推荐

猜你也喜欢看这些