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

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

124 голосов
/ 21 октября 2011

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

Ответы [ 17 ]

83 голосов
/ 21 декабря 2011

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

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

39 голосов
/ 09 июля 2012
34 голосов
/ 02 февраля 2015

Вы также можете использовать 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>
14 голосов
/ 30 марта 2016

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

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

11 голосов
/ 01 марта 2014

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

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

6 голосов
/ 29 мая 2014

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

<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>
5 голосов
/ 03 декабря 2018

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

3 голосов
/ 18 августа 2016

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

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 = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID'));
    imageMap.resize();
    return;
}
<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>
3 голосов
/ 21 июля 2015

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

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

  • map_ID (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/

2 голосов
/ 18 января 2012

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

Страница:
...