Адаптивная карта изображения

Question

У меня есть существующая карта изображений в отзывчивом HTML-макете. Изображения масштабируются в соответствии с размером браузера, но координаты изображения, очевидно, имеют фиксированный размер в пикселях. Какие варианты у меня есть, чтобы изменить размер координат карты изображения?

Answer 1

Я сталкиваюсь с тем же требованием, где, Я хочу показать адаптивную карту изображения, которая может быть изменена с любым размером экрана, и важно, я хочу выделить эти координаты .

Итак, я попробовал много библиотек, которые могут изменять размеры координат в зависимости от размера экрана и события. И я получил лучшее решение (jquery.imagemapster.min.js), которое прекрасно работает практически со всеми браузерами. Также я интегрировал его с Summer Plgin , который создает карту изображений.

 var resizeTime = 100;
 var resizeDelay = 100;    

$('img').mapster({
        areas: [
            {
                key: 'tbl',
                fillColor: 'ff0000',
                staticState: true,
                stroke: true
            }
        ],
        mapKey: 'state'
    });

    // Resize the map to fit within the boundaries provided

    function resize(maxWidth, maxHeight) {
        var image = $('img'),
            imgWidth = image.width(),
            imgHeight = image.height(),
            newWidth = 0,
            newHeight = 0;

        if (imgWidth / maxWidth > imgHeight / maxHeight) {
            newWidth = maxWidth;
        } else {
            newHeight = maxHeight;
        }
        image.mapster('resize', newWidth, newHeight, resizeTime);
    }

    function onWindowResize() {

        var curWidth = $(window).width(),
            curHeight = $(window).height(),
            checking = false;
        if (checking) {
            return;
        }
        checking = true;
        window.setTimeout(function () {
            var newWidth = $(window).width(),
                newHeight = $(window).height();
            if (newWidth === curWidth &&
                newHeight === curHeight) {
                resize(newWidth, newHeight);
            }
            checking = false;
        }, resizeDelay);
    }

    $(window).bind('resize', onWindowResize);

img[usemap] {
        border: none;
        height: auto;
        max-width: 100%;
        width: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/jquery-imagemapster@1.2.10/dist/jquery.imagemapster.min.js"></script>

<img src="https://discover.luxury/wp-content/uploads/2016/11/Cities-With-the-Most-Michelin-Star-Restaurants-1024x581.jpg" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="777, 219, 707, 309, 750, 395, 847, 431, 916, 378, 923, 295, 870, 220" href="#" alt="poly" title="Polygon" data-maphilight='' state="tbl"/>
    <area shape="circle" coords="548, 317, 72" href="#" alt="circle" title="Circle" data-maphilight='' state="tbl"/>
    <area shape="rect" coords="182, 283, 398, 385" href="#" alt="rect" title="Rectangle" data-maphilight='' state="tbl"/>
</map>

Надеюсь помочь кому-нибудь.

Answer 2

Проверьте плагин image-map на Github. Работает как с ванильным JavaScript, так и с плагином jQuery.

$('img[usemap]').imageMap();     // jQuery

ImageMap('img[usemap]')          // JavaScript

Проверьте демо .

Answer 3

Для тех, кто не хочет прибегать к JavaScript, вот пример нарезки изображения:

http://codepen.io/anon/pen/cbzrK

Когда вы масштабируете окно, изображение клоуна соответственно изменится, и когда это произойдет, нос клоуна останется с гиперссылкой.

Answer 4

Это зависит, вы можете использовать jQuery для пропорциональной регулировки диапазонов, я думаю.Почему вы используете карту изображения, кстати?Вы не можете использовать для этого масштабирующие элементы div или другие элементы?

Answer 5

Аналогично ответу Орланда здесь: https://stackoverflow.com/a/32870380/462781

В сочетании с кодом Криса здесь: https://stackoverflow.com/a/12121309/462781

Если области помещаются в сетку, вы можете наложить области на прозрачные изображения, используяширина в%, сохраняющая соотношение сторон.

    .wrapperspace {
      width: 100%;
      display: inline-block;
      position: relative;
    }
    .mainspace {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

<div class="wrapperspace">
 <img style="float: left;" title="" src="background-image.png" width="100%" />
 <div class="mainspace">
     <div>
         <img src="space-top.png" style="margin-left:6%;width:15%;"/>
     </div>
     <div>
       <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:15%;"></a>
     </div>
  <div>
   <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:10%;"></a>
   <a href="http://www.example.com"><img src="space-company.png" style="width:20%;"></a>
  </div>
 </div>
</div>

Вы можете использовать маржу в%.Кроме того, «космические» изображения могут быть размещены рядом друг с другом внутри div 3-го уровня.

Answer 6

ширина реагирования && высота

window.onload = function () {
        var ImageMap = function (map, img) {
                var n,
                    areas = map.getElementsByTagName('area'),
                    len = areas.length,
                    coords = [],
                    imgWidth = img.naturalWidth,
                    imgHeight = img.naturalHeight;
                for (n = 0; n < len; n++) {
                    coords[n] = areas[n].coords.split(',');
                }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / imgWidth,
                    y = img.offsetHeight / imgHeight;
                    imgWidth = img.offsetWidth;
                    imgHeight = img.offsetHeight;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m +=2) {
                        coords[n][m] *= x;
                        coords[n][m+1] *= y;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                    return true;
                };
                window.onresize = this.resize;
            },
        imageMap = new ImageMap(document.getElementById('map_region'), document.getElementById('prepay_region'));
        imageMap.resize();
        return;
    }

Answer 7

По какой-то причине ни одно из этих решений не сработало для меня.У меня был лучший успех с использованием преобразований.

transform: translateX(-5.8%) translateY(-5%) scale(0.884);