Текст в адаптивном изображении отображает его области - PullRequest
Новая
       14

Текст в адаптивном изображении отображает его области

0 голосов
/ 19 февраля 2019

У меня есть карта изображения следующим образом. 

<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>

Я делаю его адаптивным, чтобы он правильно отображался с помощью плагина rwdImageMaps JQuery Мэтта Стоу . 

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

Я хочу, чтобы текст отображался в областях.Причина, по которой я не hardcode (1) текст на изображении, заключается в том, что я хочу изменить текст в зависимости от языка, выбранного пользователем.

Для других элементов, которые требуют переводаНапример, <p>, я добавляю атрибут lang-tag и извлекаю соответствующий перевод из JSON;например, <p lang-tag="hello">Hello, World!</p>.

Как можно добиться того же для карты изображений, сохраняя при этом отзывчивость?

(1) Путем жесткого кодирования текста на изображении Iозначает, что текст должен быть неотъемлемой частью изображения.

1 Ответ

0 голосов
/ 19 февраля 2019
  1. Считывание координат карты изображения из тегов DOM <area>
  2. Определение фактического размера изображения
  3. Масштабирование координат в соответствии с размером изображения
  4. Абсолютно позиционируйте DIV с текстом в первой паре координат
...