map标签的基本应用 

<!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=utf-8" />
<title>xxx</title>
<link href="../style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.8.1.min.js"></script>

<style type="text/css">
*{ margin:0px; padding:0px}
body{ font-size:12px; padding:0px; margin:0px; font-family:"宋体"; }
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix{*zoom:1;}  
</style>

<script type="text/javascript">
$(document).ready(function(){
	$("#sheepmap area").hover(function(){
		alert($(this).attr("shape"));
	},function(){
		return false;
		//alert(2)
	});
});
</script>
</head>

<body>
	<img height="350" width="400" usemap="#sheepmap" src="http://img03.taobaocdn.com/tps/i3/T1f6gkXf4gXXXKBSLI-400-350.jpg">
	<map id="sheepmap" name="sheepmap">
	  <area target="_blank" href="http://detail.tmall.com/item.htm?&amp;id=16747610555" coords="42,162,105,170,113,203,78,303,59,303,69,281,65,217" shape="poly1">
	  <area target="_blank" href="http://detail.tmall.com/item.htm?&amp;id=16758125594" coords="236,168,315,162,298,212,288,292,269,292,280,270,276,233,239,191" shape="poly2">
	  <area target="_blank" href="http://detail.tmall.com/item.htm?&amp;id=16758121941" coords="107,90,163,99,232,82,237,168,175,178,106,172" shape="poly3">
	  <area target="_blank" href="http://detail.tmall.com/item.htm?&amp;id=16754861907" coords="280,91,301,80,326,140,310,151,280,102" shape="poly4">
	  <area target="_blank" href="http://detail.tmall.com/item.htm?&amp;id=18284343981" coords="99,60,140,68,220,51,151,81,123,82" shape="poly5">
	</map>
</body>
posted @ 2013-01-03 17:24  djune  阅读(186)  评论(0)  编辑  收藏  举报