map offset

<!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://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.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.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>

你可能感兴趣的:(offset)