在图像顶部显示文本 [英] Show text on top of image

问题描述

目前我有一个像这样绘制的图片

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>

与此同时，一个名为Image Mapster的Jquery插件允许我将鼠标悬停在区域上，工具提示。

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

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

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

谢谢

推荐答案

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

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%;
}

这篇关于在图像顶部显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！