1

jQueryとqTip2を使用して、イメージ マップ上の地理情報を表示しています。JSFiddle |ここでデモを見ることができます。フィドルスクリーンの結果

デスクトップ ブラウザでは、すべて正常に動作します。ホバーするとツールチップが表示され、クリックするとタグで定義されたURLに移動します。href

ただし、モバイル サファリ (iPad/iPhone) では、URL へのリンクを取得することはできません。地図をクリックするたびに、PC にカーソルを合わせているように見えますが、クリックすることはありません。

画像は標準の html で作成されます。

<img src="http://i.stack.imgur.com/6z2Z9.png" usemap="mapname">​

また、マップは標準の html で作成されますが、属性 tooltip (1)が追加されています。

<map name="mapname">
<area shape="poly"  href="?content=meteo&abm=ALL" tooltip="ABM Alland"   coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>

jQuery は(2)で非常に小さいです:

$(document).ready(function() {
    $('area').each(function() {
        $(this).qtip({
            content: { text: $(this).attr('tooltip') },
            position: {
                my: 'bottom left',
                target: 'mouse',
                viewport: $(window)
            },
            hide: { fixed: true },
            style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
        });
    });
});​

では、どうすればこの問題を解決できますか?
 
 
 

(1)この属性は data-tooltip であるべきだとわかっています。これはすぐに変更されます。

(2)イメージマップのデモに基づく

4

1 に答える 1

1

これは論理的です。タッチスクリーンでホバリングしてみたことがありますか? :-D

モバイル デバイスにはホバリング機能がないため、完全にサポートするには、データの表示方法を調整する必要があります。

  1. :hoverモバイル デバイス ユーザーの場合、デスクトップ ブラウザーでのアクションがどこで行われるかを完全に明確にする必要があります。場所を「マップから飛び出す」ようにして、ホバリングしなくても情報を取得する場所がわかるようにします。
  2. :hoverすべてのアクションを適切なタッチスクリーン アクションに置き換える必要があります。たとえば、タップ時にツールチップを提供し、リンクをツールチップ内に配置して、欠落しているホバー アクションを補います。
  3. その見返りとして、「タッチスクリーンのみ」の操作を利用して補うことができます。

Web コンテンツをモバイル デバイスに適応させる方法の出発点は、 Apples Developer Library にあります。(特にこの記事の§5)。

于 2012-04-19T20:55:24.963 に答える