当前位置：网站综合首页 >> 网页JS特效 >> 文本特效类 >> 图片选择images of radio check的代码

图片选择images of radio check的代码

来源：中国设计秀作者：佚名点击：70 加入收藏发表评论

顶一下

关键字：图片代码图片选择

代码如下,点击运行可查看效果:

<!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>
 <title>Radio Labels</title>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
function clearChoices() {
 var list = document.getElementById("choicesList");
 var choices = list.getElementsByTagName("li");
 for (var i=0;i<choices.length;i++)
 {
  choices[i].className="";
 }
}
function highlightChoice(template) {
 var michael = document.getElementById("li-michael");
 var madonna = document.getElementById("li-madonna");
 var elvis = document.getElementById("li-elvis");
 if (template == "li-michael") {
  clearChoices();
  michael.className = "on";
 }
 else if (template == "li-madonna") {
  clearChoices();
  madonna.className = "on";
 }
 else if (template == "li-elvis") {
  clearChoices();
  elvis.className = "on";
 }
}

/* so that if someone clicks on the actual radio and not the image, the effect still happens */
function prepareChoices() {
 var michael = document.getElementById("radiomichael");
 var madonna = document.getElementById("radiomadonna");
 var elvis = document.getElementById("radioelvis");
 michael.onclick = function () {
  highlightChoice("li-michael");
 }
 madonna.onclick = function () {
  highlightChoice("li-madonna");
 }
 elvis.onclick = function () {
  highlightChoice("li-elvis");
 }
}
addLoadEvent(prepareChoices);
</script>

ul#choicesList {list-style:none;padding:0;margin:0;}
ul#choicesList li {
 float:left;
 border:3px solid #ccc;
 margin-right:10px;
 padding:4px;
}
ul#choicesList label {background:#ccc;display:block;}
ul#choicesList li img {
 border:1px solid #fff;
 }
ul#choicesList li:hover {
 border-color: #f00;
 }
ul#choicesList li.on {
 border-color: #397D02;
}
</style>
</head>
<body>
<div class="wrap">
<h1>Form with Radio buttons</h1>
<p>点击图像，不仅可以选择相应的图片，但周围边界颜色变化为选定状态。</p>
<div id="choose">
 <h2>Make a choice</h2>
 <ul id="choicesList">
 <li id="li-michael">
  <img src="/uploadfile/site/uploadfile/200806/20080621110105989.jpg" /><br />
  <label for="radiomichael">
  <input
   type="radio"
   class="radio"
   name="choice"
   value="michal"
   id="radiomichael" /> Michael
  </label>
 </li>
 <li id="li-madonna">
  <img src="/uploadfile/site/uploadfile/200806/20080621110106762.jpg" /><br />
  <label for="radiomadonna">
   <input
   type="radio"
   class="radio"
   name="choice"
   value="madonna"
   id="radiomadonna" /> Madonna
  </label>
 </li>
 <li id="li-elvis">
  <img src="/uploadfile/site/uploadfile/200806/20080621110107961.jpg" /><br />
  <label for="radioelvis">
   <input
   type="radio"
   class="radio"
   name="choice"
   value="elvis"
   id="radioelvis" /> Elvis
  </label>
 </li>
 </ul>
</div>
<br clear="all" />
<br><br><br>
<p>made by http://www.cssrain.cn</p>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2008-06-25 00:55:00 出处：中国设计秀cnwebshow.com

本文引用地址：http://www.cnwebshow.com/site/html/article_2351.html

热点文章/相关文章