Show Text On Top Of Image

Currently I've an image mapped out like this

Solution 2:

http://jsfiddle.net/2v5Lpxwh/2/

HTML:

<div id="map">
    <img src="http://placehold.it/600" width="600" height="600" alt="Floor1" usemap="#Floor1">
    <div id="map_title"><span></span>
    </div>
</div>
<map id="Floor1" name="Floor1">
    <area shape="rect" name="Seat1" title="Seat1" coords="535,311,133,555" href="#" target="" />
    <area shape="rect" name="Seat2" title="Seat2" coords="121,211,11,555" href="#" target="" />
</map>

CSS:

#map {
    position:relative
}
#map_title {
    position:absolute;
    border:3px solid red;
    text-align:center;
    display:none;
}
#map_title span {
    position: relative;
    top: 45%;
    transform: translateY(-45%);
}

JQ:

$(function () {
    // show title on mosue enter
    $('area').mouseenter(function () {
        // takes the coordinates
        var title = $(this).attr('title');
        var coor = $(this).attr('coords');
        var coorA = coor.split(',');
        var left = coorA[0];
        var top = coorA[1];
        var right = coorA[2];
        var bottom = coorA[3];

        // in order to properly calculate the height and width
        // left position must be less than the right
        if (left > right) {
            var tmp = right;
            right = left;
            left = tmp;
        }
        // The same applies to top and bottom
        if (top > bottom) {
            var tmp = top;
            top = bottom;
            bottom = tmp;
        }
        // has an error / bug when the mouse moves upward seat2 map will not hide
        // this works
        top--;

        // calculate the width and height of the rectangle
        var width = right - left;
        var height = bottom - top;

        // sets the position, the sizes and text for title
        // show the title
        var $map_title = $('#map_title');
        $map_title.find('span').text(title);
        $map_title.css({
            top: top + 'px',
            left: left + 'px',
            width: width,
            height: height
        }).show();
    })

    // hide title on mouse leave
    $('#map_title').mouseleave(function () {
        $(this).hide();
    })

})