您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 表单按钮 >

用图片代替Radio选择value值

时间：2012-08-14 12:50 来源：互联网作者：admin 浏览：次收藏挑错推荐打印

<!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 type="text/css">
.on{margin:5px;border:1px solid #F60;filter:alpha(Opacity=100)}
.off{margin:5px;border:1px solid #CCC;filter:alpha(Opacity=20)}
</style>
</head>

<body>
<script language="javascript">
    function aa(a, b, c) {
        document.form1.img.value = a;
        document.getElementById("touxiang").getElementsByTagName("img")[a - 1].className = "on";
        document.getElementById("touxiang").getElementsByTagName("img")[b - 1].className = "off";
        document.getElementById("touxiang").getElementsByTagName("img")[c - 1].className = "off";
    }
    function Check(x) {
        for (i = 1; i <= 1; i++) document.all.img.value = x
    }
</script>

<div id="touxiang">
<a href="#"><img border="0" src="http://www.lanrentuku.com/down/js/images/12625057550.gif"  name=01 onclick=aa(1,2,3,4);Check(this.name,"") class="off"></a>
<a href="#"><img border="0" src="http://www.lanrentuku.com/down/js/images/12625057551.gif"  name=02 onclick=aa(2,1,3,4);Check(this.name,"") class="off"></a>
<a href="#"><img border="0" src="http://www.lanrentuku.com/down/js/images/12625057552.gif"  name=03 onclick=aa(3,1,2,4);Check(this.name,"") class="off"></a>

<form name="form1">
<input type=text name=img value="01">
</form>
<p>用图片代替Radio框选择value值，效果还不错，可以用作留言板图像选择按钮。</p>
<p>filter滤镜在Firefox下无效，但border起作用~</p>
<p>演示：<a target="_blank" href="http://www.maitianquan.com/plus/guestbook.php">http://www.maitianquan.com/plus/guestbook.php</a></p>
<p>作者：<a href="http://www.lanrentuku.com/" target="_blank">西西</a></p> 尊重他人劳动，转载请保留出处！

</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

用图片代替Radio框选择value值，效果还不错，可以用作留言板图像选择按钮。

filter滤镜在Firefox下无效，但border起作用~

演示：http://www.maitianquan.com/plus/guestbook.php

用到的图片：

用图片代替Radio选择value值

用图片代替Radio选择value值

用图片代替Radio选择value值

用图片代替Radio选择value值由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/biaodan/207.html

标签：网站源码图片代替Radio

上一篇：select头像选择代码

下一篇：js确认删除对话框

[表单按钮] css和jquery实现的select美化自

[表单按钮] CSS3实现的很漂亮的搜索框

[表单按钮] HTML5仿android手机下滑菜单效果

[表单按钮] 表单美化之textarea文本域背景的

[表单按钮] 可用于权限管理的JS树形菜单级联

[表单按钮] HTML5动态添加表格行列并编辑表

[表单按钮] html5实现开关风格的Checkbox /

[表单按钮] 表单美化之注册与登录界面的美化

[表单按钮] 网页放大缩小按钮效果

[表单按钮] 鼠标经过input时的颜色发生变化

[表单按钮] 效果超酷的textarea的输入字数限

[表单按钮] HTML5+CSS3超酷表单

相关内容推荐

水彩手绘桌面PNG图标

PHP教程下载

文本框只能输入中文

多图片上传

网易新闻频道

导航栏等等实现代码

莱卡M7相机PNG图标

中国传统食物PNG图标

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1