SO jQuery Fiddle

Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5

by kwicher

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
<div style="text-align:center; width:747px; margin-left:auto; margin-right:auto;" id="content"> 
<img id="Image-Maps_8201012242351258" src="http://adamsaewitz.com/housing/shawbasement.jpg" usemap="#Image-Maps_8201012242351258" border="0" width="747" height="599" alt="" /> 
<map id="_Image-Maps_8201012242351258" name="Image-Maps_8201012242351258"> 
<area shape="rect" coords="695,375,729,412" id="070" class="Open Double" /> 
<area shape="rect" coords="694,414,731,453" id="068" class="Split Double" /> 
</map> 
<!-- Image map text links - Start - If you do not wish to have text links under your image map, you can move or delete this DIV --> 
<div style="text-align:center; font-size:12px; font-family:verdana; margin-left:auto; margin-right:auto; width:747px;"> 
    <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;">070</a> 
 |     <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;">068</a> 
<!-- |     <a style="text-decoration:none; color:black; font-size:12px; font-family:verdana;" href="http://www.image-maps.com/index.php?aff=mapped_users_8201012242351258" title="Image Map">Image Map</a>--> 
</div> 
<!-- Image map text links - End - --> 
 
</div>

CSS

#content { position: relative; }
.info {
    position: absolute;
    color: white;
    width: 130px;
    height: 160px;
    text-align: center;
    display: none;
    background-image: url('http://adamsaewitz.com/housing/info.png');
    background-repeat: no-repeat;
}
.infoText {
    width: 113px;
    height: 135px;
    margin-left: 4px;
    margin-top: 4px;
}
.status {
    color: lightgreen;
}

JavaScript

$(document).ready(function() {
var x;
var y;
var thisText;
var type;
$("area").hover(function(e){
    thisText = $(this).attr("id");
    type = $(this).attr("class")
    var position = $(this).attr('coords').split(',');
    x = +position[0] - 50;
    y = +position[1] - 170;
    if ($(".info").length != 0) {
        $(".info").fadeOut(500).animate({top: y+'px'}, {queue: false, duration:500}).queue(function(){
            $(this).remove();
        });
    }
    $("#_Image-Maps_8201012242351258").append("<div class='info' id='info"+thisText+"' style='left:"+x+"px;top:"+y+"px;'><div class='infoText'>"+type+"<br /> Room: "+thisText+"<br />Status: <br /><b class='status'>Open (0/2)</b><br />Would you like this room? <br /> Yes  No</div></div>");
    $("#info"+thisText).fadeIn(500).animate({top: y+20+'px'}, {queue: false, duration:500});
},
function() {
    $("#info"+thisText).fadeOut(500).animate({top: y+'px'}, {queue: false, duration:500}).queue(function(){
        $(this).remove();
    });
});
});