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

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

Для адаптивных карт изображений вам понадобится плагин:

https://github.com/stowball/jQuery-rwdImageMaps (больше не поддерживается)

Или

https://github.com/davidjbradshaw/imagemap-resizer

Ни один из основных браузеров не понимает процентные координаты правильно, и все процентные координаты интерпретируются как пиксельные координаты.

http://www.howtocreate.co.uk/tutorials/html/imagemaps

А также эта страница для тестирования, реализуют ли браузеры

http://home.comcast.net/~urbanjost/IMG/resizeimg3.html

Вы также можете использовать svg вместо карты изображений. ;)

Существует учебник о том, как это сделать.

• Вот jsfiddle с некоторыми хорошими эффектами при наведении, описание и ссылки: http://jsfiddle.net/eLbpmsaj/

.hover_group:hover {
  opacity: 1;
}
#projectsvg {
  position: relative;
  width: 100%;
  padding-bottom: 77%;
  vertical-align: middle;
  margin: 0;
  overflow: hidden;
}
#projectsvg svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

<figure id="projectsvg">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" >
<!-- set your background image -->
<image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080" />
<g class="hover_group" opacity="0">
  <a xlink:href="https://example.com/link1.html">
    <text x="652" y="706.9" font-size="20">First zone</text>
    <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect>
  </a>
</g>
<g class="hover_group" opacity="0">
  <a xlink:href="https://example.com/link2.html">
    <text x="1230.7" y="952" font-size="20">Second zone</text>
    <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect>
  </a>
</g>
  </svg>
</figure>

Адаптивное изображение карты плагин jQuery Мэтт Стоу

Я наткнулся на решение, которое вообще не использует карты изображений, а привязывает теги, которые абсолютно расположены над изображением. Единственным недостатком будет то, что точка доступа должна быть прямоугольной, но плюс в том, что это решение не опирается на Javascript, а только на CSS. Существует веб-сайт, который можно использовать для создания HTML-кода для якорей: http://www.zaneray.com/responsive-image-map/

Я поместил изображение и сгенерированные теги привязки в относительно расположенный тег div, и все отлично работало при изменении размера окна и на моем мобильном телефоне.

Я нашел не-JS способ решить эту проблему, если вы в порядке с прямоугольными областями попадания.

Прежде всего, убедитесь, что ваше изображение находится в относительном позиционировании. Затем поместите изображение в этот div, что означает, что оно займет все пространство в div. Наконец, добавьте абсолютно позиционированные div-ы под изображением, внутри основного div-элемента и используйте проценты для top, left, width и height, чтобы получить области попадания ссылок нужного размера и позиции.

Я считаю, что проще всего дать div черный фоновый цвет (в идеале с некоторым альфа-замиранием, чтобы вы могли видеть связанный контент под ним), когда вы впервые работаете, и использовать инспектор кода в вашем браузере, чтобы корректировать проценты в реальном времени , так что вы можете получить это правильно.

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

<div style="position: relative;">
  <img src="background-image.png" style="width: 100%; height: auto;">
  <a href="/link1"><div style="position: absolute; left: 15%; top: 20%; width: 12%; height: 8%; background-color: rgba(0, 0, 0, .25);"></div></a>
  <a href="/link2"><div style="position: absolute; left: 52%; top: 38%; width: 14%; height: 20%; background-color: rgba(0, 0, 0, .25);"></div></a>
</div>

Используйте этот код с вашим инспектором кода в Chrome или в выбранном вами браузере и корректируйте проценты (вы можете использовать десятичные проценты, чтобы быть более точными), пока поля не станут правильными. Также выбрать background-colorиз transparentкогда вы будете готовы использовать его , так как вы хотите , чтобы ваши хиты области , чтобы быть невидимым.

Дэвид Брэдшоу написал хорошую маленькую библиотеку, которая решает эту проблему. Может использоваться с или без jQuery.

Доступно здесь: https://github.com/davidjbradshaw/imagemap-resizer

Следующий метод отлично работает для меня, поэтому вот моя полная реализация:

<img id="my_image" style="display: none;" src="my.png" width="924" height="330" border="0" usemap="#map" />

<map name="map" id="map">
    <area shape="poly" coords="774,49,810,21,922,130,920,222,894,212,885,156,874,146" href="#mylink" />
    <area shape="poly" coords="649,20,791,157,805,160,809,217,851,214,847,135,709,1,666,3" href="#myotherlink" />
</map>

<script>
$(function(){
    var image_is_loaded = false;
    $("#my_image").on('load',function() {
        $(this).data('width', $(this).attr('width')).data('height', $(this).attr('height'));
        $($(this).attr('usemap')+" area").each(function(){
            $(this).data('coords', $(this).attr('coords'));
        });

        $(this).css('width', '100%').css('height','auto').show();

        image_is_loaded = true;
        $(window).trigger('resize');
    });


    function ratioCoords (coords, ratio) {
        coord_arr = coords.split(",");

        for(i=0; i < coord_arr.length; i++) {
            coord_arr[i] = Math.round(ratio * coord_arr[i]);
        }

        return coord_arr.join(',');
    }
    $(window).on('resize', function(){
        if (image_is_loaded) {
            var img = $("#my_image");
            var ratio = img.width()/img.data('width');

            $(img.attr('usemap')+" area").each(function(){
                console.log('1: '+$(this).attr('coords'));
                $(this).attr('coords', ratioCoords($(this).data('coords'), ratio));
            });
        }
    });
});
</script>

Работая на меня (не забудьте изменить 3 вещи в коде):

• previousWidth (оригинальный размер изображения)

• map_ID (идентификатор вашей карты изображений)

• img_ID (идентификатор вашего изображения)

HTML:

<div style="width:100%;">
    <img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" />
</div>
<map id="map_ID" name="map">
<area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" />
<area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" />
<area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" />
</map>

Javascript:

window.onload = function () {
    var ImageMap = function (map, img) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 128;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = img.offsetWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = img.offsetWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
    imageMap.resize();
    return;
}

JSFiddle: http://jsfiddle.net/p7EyT/154/

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

Поэтому я перепробовал много библиотек, которые могут изменять размеры координат в зависимости от размера экрана и события. И я получил лучшее решение (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>

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

http://home.comcast.net/~urbanjost/semaphore.html является главной страницей для обсуждения и содержит ссылки на решение проблемы на основе JavaScript. Я получил уведомление о том, что HTML будет поддерживать процентные единицы в будущем, но я не видел никакого прогресса в этом достаточно давно (вероятно, прошло больше года с тех пор, как я узнал, что поддержка будет оказана), так что обходной путь Вероятно, стоит посмотреть, если вы знакомы с JavaScript / ECMAScript.

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

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

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

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

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

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

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

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

Аналогично ответу Орланда здесь: 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-го уровня.

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

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

чувствительная ширина && высота

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