Show text on top of image

Question

Currently I've an image mapped out like this

<img src="Floor1.jpg" alt="Floor1" usemap="#Floor1">

<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,111,555" href="#" target="" />
</map>

And along with this a Jquery plugin called Image Mapster that allows me to hover over the area and display a tooltip.

What I want to do now is to be able to add an extra image onto this site, but instead of me having to hover over the map area in order to see the information, it'll just display the information inside of the image map without me hovering over the area at all. I would do this in Photoshop but for the image, the information inside the tooltip can change dynamically which is why I can't.

https://i.sstatic.net/uaTCr.png

Thanks for all your help!

Answer 1

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();
    })

})

Answer 2

If I understand your question correctly, you should be able to do this with just css and html.

html:

<div class="container">
    <p class="example">Example</p>
    <img src="test">
</div>

css:

.container{
    position: relative;
}
.example{
    position:absolute;
    top: 45%;
}