高仿“点触验证码”做的一个静态Html例子

先上源码：
<html>
<head>
	<title>TouClick - Designed By MrChu</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		body {
			margin: 0px;
			padding: 0px;
		}

		.click_area {
			height: 320px;
			text-align: center;
			background: #777777;
		}

		#season {
			border: none;
		}

		.keywords {
			color: #FF0000;
		}
	</style>
	<script type="text/javascript">
		var touch = 1;
		var spring = 0;
		var summer = 0;
		var autumn = 0;
		var winter = 0;
		var first = false;
		var second = false;
		function changeStyle () {
			if (touch < 4) {
				touch++;
			} else {
				touch = 1;
			}
			spring = 0;
			summer = 0;
			autumn = 0;
			winter = 0;
			first = false;
			second = false;
			$("txt1").style.color = "#FF0000";
			$("txt2").style.color = "#FF0000";
			// Spring
			if (touch == 1) {
				$("season").src = "images/spring.jpg";
				$("season").useMap = "#springMap";
				$("txt1").innerText = "春";
				$("txt2").innerText = "桃";
			}
			// Summer
			if (touch == 2) {
				$("season").src = "images/summer.jpg";
				$("season").useMap = "#summerMap";
				$("txt1").innerText = "夏";
				$("txt2").innerText = "荷";
			}
			// Autumn
			if (touch == 3) {
				$("season").src = "images/autumn.jpg";
				$("season").useMap = "#autumnMap";
				$("txt1").innerText = "秋";
				$("txt2").innerText = "菊";
			}
			// Winter
			if (touch == 4) {
				$("season").src = "images/winter.jpg";
				$("season").useMap = "#winterMap";
				$("txt1").innerText = "冬";
				$("txt2").innerText = "梅";
			}
		}

		// Spring
		function springClick (txt) {
			if (spring == 0) {
				if (txt == "春") {
					first = true;
					$("txt1").style.color = "#008040";
				}
			}
			if (spring == 1) {
				if (txt == "桃") {
					second = true;
					$("txt2").style.color = "#008040";
				}
			}
			if (spring >= 1) {
				if (first && second) {
					alert("验证成功!");
					changeStyle();
				} else {
					alert("验证失败!");
					changeStyle();
				}
			}
			spring++;
		}

		// Summer
		function summerClick (txt) {
			if (summer == 0) {
				if (txt == "夏") {
					first = true;
					$("txt1").style.color = "#008040";
				}
			}
			if (summer == 1) {
				if (txt == "荷") {
					second = true;
					$("txt2").style.color = "#008040";
				}
			}
			if (summer >= 1) {
				if (first && second) {
					alert("验证成功!");
					changeStyle();
				} else {
					alert("验证失败!");
					changeStyle();
				}
			}
			summer++;
		}

		// Autumn
		function autumnClick (txt) {
			if (autumn == 0) {
				if (txt == "秋") {
					first = true;
					$("txt1").style.color = "#008040";
				}
			}
			if (autumn == 1) {
				if (txt == "菊") {
					second = true;
					$("txt2").style.color = "#008040";
				}
			}
			if (autumn >= 1) {
				if (first && second) {
					alert("验证成功!");
					changeStyle();
				} else {
					alert("验证失败!");
					changeStyle();
				}
			}
			autumn++;
		}

		// Winter
		function winterClick (txt) {
			if (winter == 0) {
				if (txt == "冬") {
					first = true;
					$("txt1").style.color = "#008040";
				}
			}
			if (winter == 1) {
				if (txt == "梅") {
					second = true;
					$("txt2").style.color = "#008040";
				}
			}
			if (winter >= 1) {
				if (first && second) {
					alert("验证成功!");
					changeStyle();
				} else {
					alert("验证失败!");
					changeStyle();
				}
			}
			winter++;
		}
		
		// 图片抖动脚本
		var typ = ["marginTop", "marginLeft"], rangeN=10, timeout=20;
		function shake(o, end){
			var range = Math.floor(Math.random() * rangeN);
			var typN = Math.floor(Math.random() * typ.length);
			o["style"][typ[typN]] = "" + range + "px";
			var shakeTimer = setTimeout(function(){shake(o, end)}, timeout);
			o[end] = function(){
				clearTimeout(shakeTimer)
			};
		}

		function $(id){
			return document.getElementById(id);
		}
	</script>
</head>
<body>
	<div class="click_area">
		<center>
			<div id="tb_clothes" onClick="shake(this, 'onmouseout')" style="width:372px;height:303px;background:#B7BBC3;">
				<table width="372" height="303" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td colspan="5">
							<img src="images/TouClick_01.jpg" width="372" height="7" alt=""></td>
					</tr>
					<tr>
						<td rowspan="2">
							<img src="images/TouClick_02.jpg" width="7" height="197" alt=""></td>
						<td colspan="3">
							<img src="images/spring.jpg" width="358" height="181" id="season" useMap="#springMap"></td>
						<td rowspan="2">
							<img src="images/TouClick_04.jpg" width="7" height="197" alt=""></td>
					</tr>
					<tr>
						<td colspan="3">
							<img src="images/TouClick_05.jpg" width="358" height="16" alt=""></td>
					</tr>
					<tr>
						<td colspan="5">
							<div style="width:372;height:26;font-family:'微软雅黑';font-size:16px;text-align:center;background:#F5F6F8;border:none;">点触验证：请依次点击图片中的"<span id="txt1" class="keywords">春</span>","<span id="txt2" class="keywords">桃</span>"</div>
						</td>
					</tr>
					<tr>
						<td colspan="5">
							<img src="images/TouClick_07.jpg" width="372" height="17" alt=""></td>
					</tr>
					<tr>
						<td colspan="2" rowspan="2">
							<img src="images/TouClick_08.jpg" width="167" height="55" alt=""></td>
						<td>
							<img src="images/TouClick_09.jpg" width="37" height="37" onClick="changeStyle();" onMouseDown="this.src='images/TouClick_Active.jpg'" onMouseUp="this.src='images/TouClick_09.jpg'" style="cursor:pointer;"></td>
						<td colspan="2" rowspan="2">
							<img src="images/TouClick_10.jpg" width="168" height="55" alt=""></td>
					</tr>
					<tr>
						<td>
							<img src="images/TouClick_11.jpg" width="37" height="18" alt=""></td>
					</tr>
					<tr>
						<td>
							<img src="images/分隔符.gif" width="7" height="1" alt=""></td>
						<td>
							<img src="images/分隔符.gif" width="160" height="1" alt=""></td>
						<td>
							<img src="images/分隔符.gif" width="37" height="1" alt=""></td>
						<td>
							<img src="images/分隔符.gif" width="161" height="1" alt=""></td>
						<td>
							<img src="images/分隔符.gif" width="7" height="1" alt=""></td>
					</tr>
				</table>
			</div>
		</center>
	</div>
	<map name="springMap">
		<area shape="circle" coords="64,133,17" href="javascript:springClick('春');" onfocus="this.blur()">
		<area shape="circle" coords="268,151,18" href="javascript:springClick('桃');" onfocus="this.blur()">
	</map>
	<map name="summerMap">
		<area shape="circle" coords="303,42,20" href="javascript:summerClick('夏');" onfocus="this.blur()">
		<area shape="circle" coords="233,149,17" href="javascript:summerClick('荷');" onfocus="this.blur()">
	</map>
	<map name="autumnMap">
		<area shape="circle" coords="211,74,19" href="javascript:autumnClick('秋');" onfocus="this.blur()">
		<area shape="circle" coords="46,49,18" href="javascript:autumnClick('菊');" onfocus="this.blur()">
	</map>
	<map name="winterMap">
		<area shape="circle" coords="108,158,18" href="javascript:winterClick('冬');" onfocus="this.blur()">
		<area shape="circle" coords="245,91,19" href="javascript:winterClick('梅');" onfocus="this.blur()">
	</map>
</body>
</html>
效果图：
1、验证界面