在图像顶部显示文本

Show text on top of image

本文关键字：文本 显示 顶部 图像      更新时间：2023-09-26

目前我有一个像这样的图像映射 

<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.stack.imgur.com/uaTCr.png

感谢您的帮助！

如果我

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

.html：

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

.css：

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

> 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();
    })
})
相关文章：