Как поместить некоторые ссылки динамического размера на изображение динамического размера в HTML?

Question

У меня есть изображение с class="img-responsive", на котором есть ссылки.Проблема в том, что при изменении размера изображения координаты не будут в своих правильных местах.

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

<img class="img-responsive" usemap="#image-map" src="/Content/Images/news/(8).png" alt="">
<map name="image-map">
     <area coords="419,64,15,179" shape="rect" href="" target="" alt="" title="">
     <area coords="13,184,420,277" shape="rect" href="" target="" alt="" title="">
     <area coords="14,283,420,374" shape="rect" href="" target="" alt="" title="">
     <area coords="13,380,418,473" shape="rect" href="" target="" alt="" title="">
     <area coords="14,481,419,572" shape="rect" href="" target="" alt="" title="">
</map>

Answer 1

Основываясь на последнем комментарии @Share, здесь решение с Jquery.

Несколько лет назад я столкнулся с той же проблемой.Случайно я нашел плагин Jquery, который позволяет менять coodinates, в зависимости от размера изображения.Плагин вызывает jQuery RWD Image Maps .

Вот несколько шагов, чтобы заставить его работать:

1. Сделайте оригинальное изображение и создайте кабели области (я использовал Gimpдля этого)
2. Опубликуйте оригинальное изображение в своем веб-проекте.
3. Импортируйте jquery и этот плагин на свой сайт.

Тем самым плагин работает, естьнекоторые ограничения.

Вот пример кода:

<div id="yourDivId" ...>
  <img src="yourImage" class="map" usemap="#nameofImagemap" id="elementid" ..>
  <map name="nameofImagemap">
    <area shape="rect" coords="x,x,x,x" alt="Tooltip" href="yourTarget" />
    ...
  </map>
</div>

Вызов javascript следующий:

$( document ).ready(function()
    {  
        $('#yourDivId img').rwdImageMaps();
    }

Важное примечание: всякий раз, когда размер используемого изображения изменяетсярука, вы должны воссоздать карту арема.