<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/
loose.dtd">
<html>
<head>
<title>Graphic Checkboxes</title>
<script type="text/javascript">
function graphicBox(box) {
//be unobtrusive
if (!document.getElementById)
return;
//find the object and its parent
obj=document.getElementById(box);
parentobj= obj.parentNode;
//hide the regular checkbox
obj.style.visibility="hidden";
//create the image element and
//set its onclick event
img=
document.createElement("img");
img.onclick= Toggle;
img.src="unchecked.gif";
//save the checkbox id within the
//image ID
img.id="img" + box;
//display the graphic checkbox
parentobj.insertBefore(img,obj);
}
function Toggle(e) {
if (!e) var e=window.event;
//find the image ID
img= (e.target) ? e.target :
e.srcelement;
//find the checkbox by removing
"img" from the image ID
checkid= img.id.substring(3);
checkbox=
document.getElementById(checkid);
//"click" the checkbox
checkbox.click();
//display the right image for the
//clicked or unclicked state
if (checkbox.checked)
file="checked.gif";
else file="unchecked.gif";
img.src=file;
}
//replace the second checkbox
//with a graphic
graphicBox("check2");
</script>
</head>
<body>
<h1>Graphic Checkbox Example</h1>
<form name="form1" method="post"
action="">
<p><input type="checkbox"
name="check1" id="check1" />An
Ordinary Checkbox</p>
<p><input type="checkbox"
name="check2" id="check2" />A
Graphic Checkbox, created with
unobtrusive Javascript.</p>
</form>
</body>
</html>
// I am currently learning html, css and javascript. I am using sams teach yourself book. The book has 28 chapters and am currently on chapter 21 where i encountered this code. I am stuck and unable to fully understand what each line means and what the functions are in the code. Please some1 should please explain in detail to me. I understand the html part. Just have issues with the javascript part. Thanks in advance
Aucun commentaire:
Enregistrer un commentaire