首页 > 代码库 > map area2
map area2
<!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" />
<script src=http://www.mamicode.com/"http://code.jquery.com/jquery-1.11.0.min.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
$(function(){
$("map area")
.hover(
function(){
var $obj=$(this).addClass(‘bor‘);
var offset=$obj.offset();
var coords= $obj.attr("coords").split(‘,‘);
$("#content").empty().append(this.alt).show().css({"top":(offset.top+parseInt(coords[3]))+"px","left":(offset.left+parseInt(coords[2]))+"px"});
},
function(){ $("#content").hide();});
})
</script>
</head>
<body>
<img src=http://www.mamicode.com/"http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" border="0" usemap="#bdMap" id="bd" />
<map name="bdMap" id="bdMap">
<area shape="rect" coords="35,22,115,97" alt="baidubaidu" href=http://www.mamicode.com/"http://www.baidu.com" />
<area shape="rect" coords="158,26,238,94" alt="baidubaidu222222" />
</map>
<div id="border" style="display:none; position:absolute;border:2px solid #FF0000; ">
</div>
<div id="content" style="position:absolute;display: none;width: 200px;height: 20px;background-color: red;">
</div>
</body></html>
map area2