map area 鼠标跟随

<!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">
//Map area
//border
function getOffset(obj)
{    var x = obj.offsetLeft, y = obj.offsetTop;   
 while(obj.offsetParent)
 {       
  obj = obj.offsetParent;
  x += obj.offsetLeft;       
  y += obj.offsetTop;   
 }   
 return {x : x, y : y};};
 function showBorder(obj)
 {   
  var img = document.getElementById("bd"); 
  var div = document.getElementById("border");
  var offset = getOffset(img);
  var coords = obj.coords.split(",");
  div.style.display = "block";
  div.style.left = offset.x + parseInt(coords[0]) + "px";
  div.style.top = offset.y + parseInt(coords[1]) + "px";
  div.style.width = parseInt(coords[2]) - parseInt(coords[0]) + "px";
  div.style.height = parseInt(coords[3]) - parseInt(coords[1]) + "px";
 }
 
 
 function hideBorder()
 {   
  document.getElementById("border").style.display = "none";
 }
 //content
 document.onmousemove=function(ev){
  var oEvent=ev||event;
  var oCont=document.getElementById("content");
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
  
  oCont.style.top=oEvent.clientX+scrollTop+"px";
  oCont.style.left=oEvent.clientY+scrollLeft+"px";
  
  
  //alert(oCont.style.top);
 }
 
    $(function(){
        $("map area").hover(function(){
            $("#content").empty().append(this.alt).show();;
   $(this).addClass('bor');
        },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="" onmouseover="showBorder(this);" onmouseout="hideBorder()" />
  <area shape="rect" coords="158,26,238,94" alt="baidubaidu222222" onmouseover="showBorder(this);" onmouseout="hideBorder()" />
 </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 area 鼠标跟随)