在图像顶部显示文本

Question

目前，我有一张这样的图像

<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>

此外，还有一个名为Image Mapster的Jquery插件，它允许我将鼠标悬停在该区域并显示工具提示。

我现在想要做的是能够在这个网站上添加一个额外的图像，而不是我必须在地图区域上悬停才能看到信息，它只会显示图像地图内部的信息，而我根本不需要悬停在该区域上。我会在Photoshop中这样做，但对于图像，工具提示中的信息可以动态变化，这就是为什么我不能。

https://i.imgur.com/wAjNn0d.png

谢谢你的帮助！

Answer 1

如果我正确理解了你的问题，你应该能够用css和html来做到这一点。

html：

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

css：

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

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

})