it-roy-ru.com

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

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

14
Bryan

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

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

Обновление

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

6
Marakoss

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

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

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

$('img[usemap]').rwdImageMaps();
4
tsdexter

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

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

  • Поместите 4 изображения в div с 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
steveax

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

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

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

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

2
Alex Holsgrove

Поместите все содержимое ВНУТРИ ТАБЛИЦЫ. Установите ширину 100%. Кажется, что iphone не масштабирует таблицы ... Я боролся с этой проблемой, так как мои изображения просто терялись, или внутри div. Ни одна из прямых ссылок не работала. Но когда я положил все это в стол ... Ну, просто попробуй и посмотри :)

1
Steve

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

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

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

0
Dana Haynes - Apple Consultant

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

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

0
mike nelson

Я выкопал этот пост, потому что я только что нашел решение, чтобы заставить карту изображений работать на 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
Dabi

Не используйте Default <img usemap="#map"> и <map name="map"> меняйте его. Как <img usemap="#mapLink"> и <map name="mapLink">. Работает !!!

0
leolee10