Отзывчивая карта изображения не работает. Нужно другое решение [дублировать]

В качестве класса (ES6):

class ResponsiveImageMap {
    constructor(map, img, width) {
        this.img = img;
        this.originalWidth = width;
        this.areas = [];

        for (const area of map.getElementsByTagName('area')) {
            this.areas.push({
                element: area,
                originalCoords: area.coords.split(',')
            });
        }

        window.addEventListener('resize', e => this.resize(e));
        this.resize();
    }

    resize() {
        const ratio = this.img.offsetWidth / this.originalWidth;

        for (const area of this.areas) {
            const newCoords = [];
            for (const originalCoord of area.originalCoords) {
                newCoords.push(Math.round(originalCoord * ratio));
            }
            area.element.coords = newCoords.join(',');
        }

        return true;
    };
}

Использование:

var map = document.getElementById('myMapId');
var image = document.getElementById('myImageId');
new ResponsiveImageMap(map, image, 800);

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

Его можно использовать с jQuery или без него.

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

, и вы можете видеть, что он работает.

http://davidjbradshaw.com/imagemap-resizer/example/

Вы можете использовать спрайты CSS для достижения этого. У вас будут части изображения, вписывающиеся в одно изображение, и таким образом вы просто будете делать один HTTP-запрос для загрузки всех изображений. Этот метод не требует javascript, и вы просто будете использовать свойство background-position; для перемещения ваших изображений.

Это эффективный метод оптимизации страницы.

У меня была та же проблема на прошлой неделе, и я закончил писать плагин jQuery для этого.

Вот проект gitHub:

https://github.com / etienne-martin / mapify

Основное использование:

$("img[usemap]").mapify();

Пример в реальном времени

http://emartin.ca/ mapify /

Вы можете попытаться использовать процент в координатах, но он не будет работать в большинстве браузеров (если не все). Поэтому вы должны использовать JavaScript. Или используйте абсолютные позиционные divs с процентными координатами вместо карты.

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

function wrap ( img, map ) {
  var originalCoords = [ ],
      test = new Image();

  for ( var i = 0; i < map.areas.length; ++i ) {
    var coords = map.areas[i].coords;
    originalCoords.push( coords.split( "," ).map( parseFloat ) );
  }

  function resize () {
    var ratio = img.width / test.width;
    for ( var i = 0; i < map.areas.length; ++i ) {
      map.areas[i].coords = originalCoords[i].map( function ( n ) {
        return ratio * n;
      } ).join( "," );
    }
  }

  test.addEventListener( "load", function () {
    window.addEventListener( "resize", resize, false );
    resize();
  }, false );

  test.src = img.src;
}

var imgs = document.querySelectorAll( "img[usemap]" );
for ( var i = 0; i < imgs.length; ++i ) {
  var map = document.querySelector( "map[name=" + imgs[i].useMap.substring( 1 ) + "]" );
  wrap( imgs[i], map );
}

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

. Помимо всего прочего, области автоматически масштабируются в зависимости от размер изображения. Обратите внимание, что для отображения областей используется холст.

Основное использование:

$(function() {
  $('#map').pictarea({
    rescaleOnResize: true
  });
});

, для этого вам нужно иметь атрибут data-original-coords, имеющий coords к исходному изображению

$(function () {
    function adjeustCoords() {
        var image=$('img'); //change that to your image selector
        var originalWidth=image[0].naturalWidth;
        var currentWidth=image.width();
        var ratio=currentWidth/originalWidth;
        $("map area").each(function(){
            //change that to your area selector
            var coords=$(this).attr('data-original-coords').split(',');
            coords = coords.map(function (x) {
                return Math.round(x*ratio);
                //i don't know if all browsers can accept floating point so i round the result
            });
            $(this).attr('coords',coords.join());
        });
    }
    adjeustCoords();
    $(window).resize(function(){
        adjeustCoords();
    });
});

, это работает с хромовыми, firefox и крайними наименьшими версиями