карта изображений не работает на устройствах iOS с большими изображениями, которые масштабируются устройством - PullRequest
Новая
       3

карта изображений не работает на устройствах iOS с большими изображениями, которые масштабируются устройством

14 голосов
/ 07 июля 2011

Я разрабатываю внутреннее веб-приложение в интрасети нашей компании с использованием PHP. Один раздел приложения отображает пару изображений с высоким разрешением для пользователя. Эти изображения в области 5000x3500 пикселей. Каждое изображение имеет карту изображений (с использованием прямоугольных областей), и все отлично работает в браузерах рабочего стола, которые я пробовал.

Проблема, с которой я сталкиваюсь, заключается в том, что когда пользователи получают доступ к сайту через свои устройства iOS, изображения изменяются с помощью safari на устройстве, однако координаты карты изображения не корректируются для соответствия.

Пример HTML-кода, сгенерированного моим PHP, выглядит следующим образом: 

<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,5000,500" href="blah1"/>
  <area shape="rect" coords="0,500,2500,3500" href="blah2"/>
  <area shape="rect" coords="2500,500,5000,3500" href="blah3"/>
</map>

(Фактические координаты прямоугольника на карте изображения рассчитываются в процентах от размера изображения).

Я знаю, что safari изменяет размер изображения из-за ограничений памяти на устройстве, но мне нужно либо найти способ масштабирования карты изображения, чтобы он соответствовал, либо заменить карту изображения чем-то еще, что будет выполнять ту же работу. Кто-нибудь может предложить какой-либо совет?

Ответы [ 10 ]

6 голосов
/ 03 апреля 2012

Эта тема была решена здесь для stackoverflow: jquery-image-map-alternative

Лучшая идея состоит в том, чтобы использовать абсолютно позиционированные якоря (также как предложено steveax) вместо imagemap.

Обновление

Поскольку это старый вопрос, вы можете подумать об использовании SVG maps в наши дни. Они поддерживаются во всех современных браузерах, работают быстро и просты в использовании, как карты изображений. (спасибо пользователю vladkras за напоминание)

4 голосов
/ 16 июня 2013

Почему бы вам не использовать вместо этого адаптивные карты изображений.Таким образом, вы все равно можете использовать поли-карты для предметов странной формы.

http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

Это так же просто, как добавить скрипт.И одна строка JavaScript: 

$('img[usemap]').rwdImageMaps();
2 голосов
/ 01 апреля 2012

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

  • Разделить изображение на 4 сектора

  • Поместить 4 изображения в деления с width и height, установленными на 50% и position: absolute;

  • Абсолютно позиционированные <a> элементы в родительском элементе квадранта с использованием процентные значения и высокий z-index

Как это:

CSS 

#map-frame { position: relative; }
.map {
    display: block;
    position: absolute;
    width: 5%;
    height: 3%;
    z-index: 99;
}
.q {
    position: absolute;
    width: 50%;
    height: 50%;
}
.q img {
    display: block;
    max-width: 100%;
}
.q1 {
    top: 0;
    left: 0;
}
.q2 {
    top: 0;
    right: 0;
}
.q3 {
    bottom: 0;
    left: 0;
}
.q4 {
    bottom: 0;
    right: 0;
}

HTML 

<div id="map-frame">
    <a class="map" href="foo.html" style="top: 20%; left: 20%;">
    <a class="map" href="foo.html" style="top: 40%; left: 20%;">
    <a class="map" href="foo.html" style="top: 20%; left: 40%;">
    <a class="map" href="foo.html" style="top: 40%; left: 40%;">
    <div id="q1" class="q">
        <img alt="" src="q1.jpg" />
    </div>
    <div id="q2" class="q">
        <img alt="" src="q2.jpg" />
    </div>
    <div id="q3" class="q">
        <img alt="" src="q3.jpg" />
    </div>
    <div id="q4" class="q">
        <img alt="" src="q4.jpg" />
    </div>
</div>
2 голосов
/ 30 марта 2012

Комментарий Натана правильный. Вам нужно исправить окно просмотра, чтобы предотвратить масштабирование. По сути, либо укажите фиксированную ширину пикселя, либо установите масштаб на 1,0 и установите пользовательский масштабируемый = нет

См. Этот документ для справки:

http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Альтернативой использованию тега area является использование javascript с событиями x / y & bounds для областей попадания.

1 голос
/ 15 мая 2013

Поместите все содержимое в стол. Установите ширину 100%. Iphone, кажется, не масштабирует таблицы ... Я боролся с этой проблемой, так как мои изображения просто терялись, или внутри div. ни одна из прямых координатных ссылок не работала. Но когда я помещаю всю партию в стол ... Ну, просто попробуй и посмотри:)

0 голосов
/ 04 ноября 2017

Мое решение было легким. Я просто назначил высоту и ширину в CSS DIV, чтобы соответствовать размеру изображения, и все работало нормально. Исходный размер изображения был 825 х 1068, поэтому 

    <div style= width: 825px; height: 1068px;">
    ...
    </div>

Надеюсь, это поможет.

0 голосов
/ 22 сентября 2017

Простое использование # в атрибуте usemap позволяет решить проблему на iPhone.

Например <img usemap="#mapLink"> и <map name="mapLink">

0 голосов
/ 20 января 2016

Не использовать По умолчанию <img usemap="#map"> и <map name="map"> изменить его.Как <img usemap="#mapLink"> и <map name="mapLink">.Это работает !!!

0 голосов
/ 21 октября 2014

Я выкопал этот пост, потому что я только что нашел решение, чтобы заставить карту изображений работать на iOS.

Поместите свою карту в привязку и прослушайте события щелчка / касания, чтобы проверить, является ли цельэлемент соответствует области карты.

HTML 

<a id="areas" href="#">
    <img src="example.jpg" usemap="#mymap" width="1024" height="768">
    <map name="mymap">
        <area id="area1" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area2" shape="poly" coords="X1,Y1,X2,Y2...">
        <area id="area3" shape="poly" coords="X1,Y1,X2,Y2...">
    </map>
</a>

JAVASCRIPT 

$("#areas").on("click tap", function (evt) {
    evt.preventDefault();
    if (evt.target.tagName.toLowerCase() == "area") {
        console.log("Shape " + evt.target.id.replace("area", "") + " clicked!");
    }
});

Протестировано на iPad4 с мобильным сафари 6.0

0 голосов
/ 01 апреля 2012 
<img src="largeimage.jpg" width="5000" height="3500" usemap="#examplemap">
<map name="examplemap">
  <area shape="rect" coords="0,0,100%,10%" href="blah1"/>
  <area shape="rect" coords="0,10%,50%,70%" href="blah2"/>
  <area shape="rect" coords="50%,10%,100%,70%" href="blah3"/>
</map>

пожалуйста, попробуйте использовать процентные значения внутри координат

...