carte d'image ne fonctionne pas sur les appareils iOS, avec de grandes images qui sont mises à l'échelle par l'appareil

Je suis le développement interne d'une application web sur notre site intranet de l'entreprise à l'aide de PHP. Une section de l'application affiche un couple d'images à haute résolution pour l'utilisateur. Ces images sont dans la région de 5000x3500 pixels. Chaque image est une image de la carte (à l'aide de zones rectangulaires), et tout fonctionne très bien dans les navigateurs de bureau, j'ai essayé.

Le problème, je vais trouver, c'est que lorsque les utilisateurs accèdent au site par le biais de leurs appareils iOS, les images sont redimensionnées par safari sur l'appareil, mais l'image de la carte les coordonnées ne sont pas ajustés pour correspondre.

Un exemple de l'HTML généré par mon PHP est comme suit:

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

(Le rectangle de coordonnées dans l'image de la carte sont calculés comme un pourcentage de la taille de l'image).

Je sais que safari est le redimensionnement de l'image en raison des contraintes de mémoire sur l'appareil, mais j'ai besoin de trouver un moyen de l'échelle de l'image de la carte en fonction des besoins, ou de remplacement de l'image de la carte avec quelque chose d'autre qui vont faire le même travail. Quelqu'un peut-il offrir à tout conseiller?

source d'informationauteur Bryan

  1. 6

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

    La meilleure idée est d'utiliser le positionnement absolu des ancres (également comme suggéré par steveax) au lieu de imagemap.

    Mise à jour

    Que c'est une vieille question, vous pourriez envisager d'utiliser SVG cartes ces jours-ci. Ils sont pris en charge dans tous les navigateurs modernes, fonctionne rapidement et sont aussi faciles à utiliser que les cartes-images. (merci à l'utilisateur vladkras pour rappel)

  2. 4

    Pourquoi n'utilisez-vous pas Sensible de l'Image des Cartes à la place. De cette façon, vous pouvez toujours utiliser le poly de cartes pour la forme étrange des objets.

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

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

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

    Nathan commentaire est correct. Vous avez besoin de fixer la fenêtre pour empêcher la mise à l'échelle. En gros, soit décider d'un pixel de largeur, ou de définir l'échelle de 1.0 et set user-scalable=no

    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 zone de la balise est d'utiliser javascript avec les événements de x/y & limites pour votre touchées.

  4. 2

    Je suis tombé sur cette limitation récemment sur un projet dans lequel nous devions être en mesure de zoom et c'est ce que j'ai fait pour le résoudre:

    • Séparer l'image en 4 quadrants

    • Placé les 4 images dans des divs avec width et height fixé à 50% et position: absolute;

    • En position absolue <a> éléments dans le quadrant de l'élément parent à l'aide
      pourcentage de valeurs et d'un haut z-index

    Comme ceci:

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

    Mettre tout le contenu à l'INTÉRIEUR d'UN TABLEAU. Jeu à 100% de largeur. L'iphone n'a pas l'air à l'échelle des tables... j'ai été aux prises avec ce problème que j'ai eu mes images juste de perdre, ou à l'intérieur d'un div.
    aucun des rect coords des liens de travail. Mais quand j'ai mis le tout à l'intérieur d'un tableau... eh Bien, il suffit de l'essayer et de voir 🙂

  6. 0

    Je déterrer ce post car je viens de trouver une solution pour obtenir une image de la carte de travail sur iOS.

    Mettre votre carte à l'intérieur d'une ancre et d'écouter cliquez/appuyez sur événements sur elle, pour vérifier si l'élément cible correspond à une carte de la région.

    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 navigateur safari mobile 6.0

  7. 0

    Ne pas utiliser par Défaut <img usemap="#map"> et <map name="map"> changer. Comme <img usemap="#mapLink"> et <map name="mapLink">. C'est le travail !!!

  8. 0

    Simplement à l'aide d'un # dans le usemap attribut semble résoudre le problème sur l'iPhone.

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

  9. 0

    Ma solution a été facile. Je viens affecté à une hauteur et la largeur de la DIV en css pour l'adapter à la taille de l'image et tout a bien fonctionné. Taille originale de l'image a été 825 x 1068, donc 

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

    Espère que cela aide.

  10. -2
    <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>

    essayez en utilisant des valeurs de pourcentage à l'intérieur de coordonnées