<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head></head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<style>
.abs {position:absolute;zoom:1}
</style>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div style="background:#ffc;height:20px;margin:20px 0;padding:20px;">rank</div>
<div id="abs-right" class="abs"> </div>
<div id="abs-left" class="abs"> </div>
<div id="abs-bottom" class="abs"> </div>
<div id="abs-top" class="abs"> </div>
<script type="text/javascript">//<![CDATA[
$(document).mouseover(function(e) {
var target = e.target;
var width = target.offsetWidth;
var height = target.offsetHeight;
var pos = $(target).offset();
$('#abs-top').css({"background":"blue","left":pos.left,"top":pos.top,"width":width,"height":1});
$('#abs-bottom').css({"background":"blue","left":pos.left,"top":pos.top+height,"width":width,"height":1});
$('#abs-left').css({"background":"blue","left":pos.left,"top":pos.top,"width":1,"height":height});
$('#abs-right').css({"background":"blue","left":pos.left+width,"top":pos.top,"width":1,"height":height});
});
$(document).click(function(e) {
alert($(e.target).html());
});
//]]></script>
</body>
</html>