首页 > 代码库 > 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