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

Ответ 1

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

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

Обновление

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

Ответ 2

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

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

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

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

Ответ 3

Комментарий Натана верен. Чтобы предотвратить масштабирование, вам необходимо установить окно просмотра. В принципе, либо укажите фиксированную ширину пикселя, либо установите масштаб в 1.0 и установите user-scaleable = no

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

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

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

Ответ 4

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

• Разделите изображение на 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>

Ответ 5

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

Мое решение было легким. Я просто назначил высоту и ширину в DIV css, чтобы соответствовать размеру изображения, и все работало нормально. Размер оригинального изображения: 825 x 1068, поэтому

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

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

Ответ 10

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

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