jquery - 响应式图像中的文本映射其区域
问题描述
我有一个图像映射如下。
<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 的 rwdImageMaps JQuery 插件正确显示它。
<script src="./js/jquery.rwdImageMaps.min.js"></script>
<script>$('img[usemap]').rwdImageMaps();</script>
我想在区域上显示文本。我不硬编码(1) 图像上的文本的原因是因为我想根据用户选择的语言更改文本。
对于其他需要翻译的元素,例如 simple <p>
,我添加一个属性lang-tag
并从 JSON 中获取相关翻译;例如<p lang-tag="hello">Hello, World!</p>
。
如何在保持响应能力的同时为图像地图实现相同的目标?
(1) 通过对图像上的文本进行硬编码,我的意思是让文本成为图像的固有部分。
解决方案
<area>
从 DOM标签中读取图像地图坐标- 确定实际图像大小
- 缩放坐标以匹配图像大小
- 将带有文本的 DIV 绝对定位在第一对坐标处
推荐阅读
- javascript - 进度条不显示进度
- php - 如何在不使用隐藏表单字段的情况下将 ID 传递给控制器?
- azure-functions - Azure Function (ServiceBus) System.Private.CoreLib 错误(在本地工作)
- java - Ubuntu 中的 Bashscript 错误:awk:第 1 行:正则表达式超出实现大小限制
- c# - AngleSharp 的 Document.DocumentUri 与 Document.Url 有何不同?
- sql-server - 在安全登录中找到用户“l_certSignSmDetach”,但不知道它的用途
- c# - 如何通过属性使字典只读?
- qt - QML QtQuick。动态创建的组件不适用于绑定和基本方法
- wordpress - Gutenberg - 一种块类型中的多个 InnerBlocks
- python - 日历库中的值太多无法解压错误