На
jQuery и jquery.tipsy.min.js (всплывающие подсказки), есть плагины с более крутыми подсказками
http://jquerylist.ru/tooltipe
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Заказ МАР-карт (2) (Единый форум поддержки)</title>
<link rel="stylesheet" type="text/css" href="http://st0.bbcorp.ru/style/extra.14.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://st0.bbcorp.ru/js/jquery.tipsy.min.js"></script>
</head>
<body style="padding-top:30px">
<center>
<img src="http://s017.radikal.ru/i420/1112/ec/75a65e6e1237.jpg" width="365" height="481"
border="0" usemap="#mapka">
<map name="mapka" id="Map">
<span class="tipsy-Map" title="Aнкеты"><area shape="rect" coords="141,239,247,267"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=5"></span>
<span class="tipsy-Map" title="Правила"><area shape="rect" coords="202,277,308,308"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=2"></span>
<span class="tipsy-Map" title="Флуд"><area shape="rect" coords="148,313,219,344"
href="http://rolevayagrotter.mybb.ru/viewforum.php?id=1"></span>
<span class="tipsy-Map" title="Список занятых внешностей"><area shape="rect" coords="216,350,361,376"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=35"></span>
<span class="tipsy-Map" title="Вопросы"><area shape="rect" coords="148,385,246,411"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=3"></span>
<span class="tipsy-Map" title="Предложения"><area shape="rect" coords="205,421,361,450"
href="http://rolevayagrotter.mybb.ru/viewtopic.php?id=62"></span>
</map></center>
<style>
.tipsy.tipsy-s.Map{
font-size:14px;
z-index:10000!important;
}
</style>
<script>
var offset_On=false;
function mouseShowHandler(e){
e = e || window.event
if(offset_On){ if (e.pageX == null && e.clientX != null ) {
var html = document.documentElement
var body = document.body
e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
}
//document.getElementById('mouseX').value = e.pageX
//document.getElementById('mouseY').value = e.pageY
$(".tipsy.tipsy-s.Map").css({"top":(e.pageY-50)+"px","left":(e.pageX-30)+"px"});//offset_On=false;
}}
// nw | n | ne | w | e | sw | s | se
$("#Map .tipsy-Map").tipsy({gravity: 's Map'});
$("#Map .tipsy-Map").mouseover(function(){
offset_On=true;$(document).mousemove(mouseShowHandler)
}).mouseout(function(){
offset_On=false;
});
</script>
</body>
</html>