<!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>