web-dev-qa-db-fra.com

la carte d'image ne fonctionne pas sur les appareils iOS, avec de grandes images qui sont redimensionnées par l'appareil

Je développe une application Web interne sur l'intranet de notre société à l'aide de PHP. Une section de l'application affiche quelques images haute résolution pour l'utilisateur. Ces images sont dans la région de 5000x3500 pixels. Chaque image a une carte d’image (en utilisant des zones rectangulaires), et tout fonctionne correctement dans les navigateurs de bureau que j’ai essayés.

Le problème que je constate est que lorsque les utilisateurs accèdent au site via leurs appareils iOS, les images sont redimensionnées par safari sur l'appareil, mais les coordonnées de la carte ne sont pas ajustées.

Voici un exemple de code HTML généré par mon 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>

(Les coordonnées rectangulaires réelles dans la carte d’image sont calculées en pourcentage de la taille de l’image).

Je sais que safari redimensionne l'image en raison de contraintes de mémoire sur le périphérique, mais je dois trouver un moyen de redimensionner la carte, ou de remplacer la carte par quelque chose d'autre qui fera le même travail. Quelqu'un peut-il offrir des conseils?

iphonehtmliosipadimagemap
14
Bryan

Ce sujet a été résolu ici sur stackoverflow: jquery-image-map-alternative

La meilleure idée est d'utiliser des ancres positionnées de manière absolue (comme le suggère steveax) au lieu de imagemap.

Mise à jour

Comme il s’agit d’une question ancienne, vous pouvez envisager d’utiliser SVG maps ces jours-ci. Ils sont pris en charge par tous les navigateurs modernes, fonctionnent de manière réactive et sont aussi faciles à utiliser que des cartes illustrées. (merci à l'utilisateur vladkras pour le rappel)

6
Marakoss

Pourquoi n'utilisez-vous pas Responsive Image Maps à la place. De cette façon, vous pouvez toujours utiliser des cartes poly pour les objets de forme irrégulière.

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

C'est aussi simple que d'ajouter le script. Et une ligne de javascript:

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

J'ai rencontré récemment cette limitation sur un projet dans lequel nous devions pouvoir zoomer et voici ce que j'ai fait pour le résoudre:

  • Diviser l'image en 4 quadrants

  • Placé les 4 images dans des divs avec width et height réglés sur 50% et position: absolute;

  • Éléments <a> absolument positionnés dans l'élément parent du quadrant à l'aide de valeurs de pourcentage et d'un z-index élevé

Comme ça:

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

Le commentaire de Nathan est correct. Vous devez corriger la fenêtre d'affichage pour empêcher la mise à l'échelle. Fondamentalement, spécifiez une largeur de pixel fixe ou définissez l'échelle sur 1.0 et définissez la variable scalable sur l'utilisateur = non.

Voir ce document pour référence:

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

Une alternative à l’utilisation de la balise area consiste à utiliser javascript avec les événements x/y et les limites pour vos zones de contact.

2
Alex Holsgrove

Mettez tout le contenu DANS UNE TABLE. Régler à 100% largeur. L'iphone ne semble pas se mettre à l'échelle des tables ... Je me débattais avec ce problème car je venais de perdre mes images, ou à l'intérieur d'un div. aucun des liens rect coords ne fonctionnait. Mais quand je mets le tout dans une table ... Bien, essayez et voyez :)

1
Steve

Ma solution était facile. Je viens d'attribuer une hauteur et une largeur dans le css de la DIV pour correspondre à la taille de l'image et tout a bien fonctionné. La taille de l’image originale était de 825 x 1068, donc

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

J'espère que ça aide.

0
Dana Haynes - Apple Consultant

Utiliser simplement un # dans l'attribut usemap apparaît pour résoudre le problème sur iPhone.

Par exemple <img usemap="#mapLink"> et <map name="mapLink">

0
mike nelson

J'ai creusé ce post parce que je viens de trouver une solution pour que la carte-image fonctionne sur iOS.

Placez votre carte dans une ancre et écoutez les événements click/tap dessus pour vérifier si l'élément cible correspond à la zone de la carte.

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!");
    }
});

Testé sur iPad4 avec le safari mobile 6.0

0
Dabi

N'utilisez pas Par défaut <img usemap="#map"> et <map name="map"> pour le changer. Comme <img usemap="#mapLink"> et <map name="mapLink">. Ça marche !!!

0
leolee10