Question

我有一个如下的图像图。

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <img src="..." style="width: 100%;" usemap="#image-map">

            <map name="image-map">
                <area href="#..." coords="2131,1690,1966,1696,1972,2114,2571,2117,2577,1398,2131,1398" shape="poly">
                <area href="#..." coords="1393,1686,1948,2114" shape="rect">
                <area href="#..." coords="460,1547,460,2120,1291,2120,1288,1572" shape="poly">
                <area href="#..." coords="429,1020,674,1324" shape="rect">
                <area href="#..." coords="686,1020,1334,1321" shape="rect">
                <area href="#..." coords="463,1386,2109,1401,2103,1659,1387,1659,1381,1559,466,1525" shape="poly">
            </map>
        </div>
    </div>
</div>

我使其具有响应性，因此可以使用Matt Stow's rwdImageMaps JQuery plugin正确显示它。

<script src="./js/jquery.rwdImageMaps.min.js"></script>
<script>$('img[usemap]').rwdImageMaps();</script>

我想在区域上显示文本。我之所以不硬编码（1）图像上的文本，是因为我想根据用户选择的语言来更改文本。

对于其他需要翻译的元素，例如简单的<p>，我添加了一个属性lang-tag并从JSON获取相关翻译；例如<p lang-tag="hello">Hello, World!</p>。

如何在保持响应速度的同时对图像映射实现相同的目标？

（1）通过对图像上的文本进行硬编码，我的意思是让文本成为图像的固有部分。

Answer 1

从DOM <area>标签中读取图像地图坐标
确定实际图像尺寸
缩放坐标以匹配图像大小
将DIV绝对放置在文本的第一对坐标上

自适应图像中的文本映射了其区域

1 个答案: