Show Text On Top Of Image

Currently I've an image mapped out like this

Solution 2:

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

HTML:

<divid="map"><imgsrc="http://placehold.it/600"width="600"height="600"alt="Floor1"usemap="#Floor1"><divid="map_title"><span></span></div></div><mapid="Floor1"name="Floor1"><areashape="rect"name="Seat1"title="Seat1"coords="535,311,133,555"href="#"target="" /><areashape="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_titlespan {
    position: relative;
    top: 45%;
    transform: translateY(-45%);
}

JQ:

$(function () {
    // show title on mosue enter
    $('area').mouseenter(function () {
        // takes the coordinatesvar 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 rightif (left > right) {
            var tmp = right;
            right = left;
            left = tmp;
        }
        // The same applies to top and bottomif (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 rectanglevar width = right - left;
        var height = bottom - top;

        // sets the position, the sizes and text for title// show the titlevar $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();
    })

})