响应图像中文本映射其区域
响应图像中文本映射其区域
提问于 2019-02-20 04:23:19
我有一个图像映射，如下所示。
<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)通过在图像上硬编码文本，我的意思是让文本成为图像的固有部分。
回答 1
Stack Overflow用户
发布于 2019-02-20 04:32:18
- 从DOM
<area>标签中读取图像映射坐标 - 确定实际图像大小
- 缩放坐标以匹配图像DIV与第一对坐标处的文本
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54774355
复制相关文章
相似问题