web-dev-qa-db-ja.com

iOSデバイスでイメージマップが機能せず、デバイスによって再スケーリングされる大きな画像

PHPを使用して、社内イントラネットで内部Webアプリを開発しています。アプリの1つのセクションには、ユーザーに2つの高解像度画像が表示されます。これらの画像は5000x3500ピクセルの領域にあります。各画像には（長方形の領域を使用した）イメージマップがあり、私が試したデスクトップブラウザではすべて正常に機能します。

私が見つけた問題は、ユーザーがiOSデバイスを介してサイトにアクセスすると、デバイス上のサファリによって画像が再スケーリングされますが、画像マップの座標が一致するように調整されていないことです。

My PHPによって生成されるHTMLの例は次のとおりです。

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

（イメージマップ内の実際の長方形の座標は、イメージサイズのパーセンテージとして計算されます）。

デバイスのメモリの制約のためにサファリが画像のサイズを変更していることは知っていますが、画像マップを適切に拡大縮小する方法を見つけるか、画像マップを同じ仕事をする別のものに置き換える必要があります。誰かがアドバイスを提供できますか？

iphonehtmliosipadimagemap
14
Bryan

このトピックは、stackoverflowでここで解決されました： jquery-image-map-alternative

最良のアイデアは、イメージマップの代わりに絶対位置のアンカー（steveaxによって提案されている）を使用することです。

更新

これは古い質問なので、最近はSVGマップの使用を検討するかもしれません。これらはすべての最新のブラウザでサポートされており、応答性が高く、イメージマップと同じくらい簡単に使用できます。 （リマインダーのためのユーザーvladkrasに感謝します）

6
Marakoss

代わりにレスポンシブイメージマップを使ってみませんか。このようにして、奇妙な形のアイテムにポリマップを使用することができます。

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

スクリプトを追加するのと同じくらい簡単です。そしてjavascriptの1行：

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

私は最近、ズームできるようにする必要があるプロジェクトでこの制限に遭遇しました。これは私がそれを解決するためにしたことです。

  • 画像を4つの象限に分割します

  • widthとheightを50％に設定し、position: absolute;を使用して4つの画像をdivに配置しました

  • パーセンテージ値と高い<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

エリアタグを使用する代わりに、ヒットエリアのイベントx/yと境界でjavascriptを使用することもできます。

2
Alex Holsgrove

すべてのコンテンツをテーブルの中に入れます。幅を100％に設定します。 iPhoneはテーブルを拡大縮小していないようです...画像が失われたり、div内にあったりしたため、この問題に苦労していました。 rectcoordsリンクはどれも機能していませんでした。しかし、私がテーブルの中に全部を入れたとき...まあ、それを試してみてください:)

1
Steve

私の解決策は簡単でした。画像のサイズに一致するようにDIVのcssに高さと幅を割り当てたところ、すべてが正常に機能しました。元の画像サイズは825x 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!");
    }
});

モバイルサファリ6.0を搭載したiPad4でテスト済み

0
Dabi

使用しないでくださいデフォルト<img usemap="#map">および<map name="map"> それを変更。お気に入り <img usemap="#mapLink">および<map name="mapLink">。それは働いています!!!

0
leolee10