如何使移動Safari瀏覽器中的圖像地圖可點擊？

我使用jQuery和qTip2使圖像地圖上的地理信息可見。你可以看到演示here on JSFiddle | Fiddle Screen result 如何使移動Safari瀏覽器中的圖像地圖可點擊？

在桌面瀏覽器上一切正常。 上懸停看到提示和上單擊你去URL通過href標籤來定義的。

但是在移動Safari（ipad/iphone）上，無法獲取鏈接到該URL。每次你點擊地圖時，它就像你懸停在電腦上，但從來沒有點擊。

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

也地圖與標準HTML，但具有附加屬性工具提示創建^（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是非常微小的

的圖像與標準的HTML創建與^（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）我知道這個屬性應該是數據提示。這將很快改變。

^（2）基於該imagemap demo

來源

2012-04-12 Neysor

這是符合邏輯的。曾嘗試在觸摸屏上徘徊？ :-D

由於移動設備無法懸停，因此您需要調整自己呈現數據的方式，以完全支持它們。

對於移動設備用戶，您需要清楚地瞭解在桌面瀏覽器上發生的:hover操作的位置。讓這些地方「跳出地圖」，讓他們知道沒有懸停，在哪裏檢索信息。
您需要用足夠的觸摸屏操作替換每個:hover操作。例如，提供點擊提示工具提示，並將工具提示內的鏈接補償失蹤的懸停操作。
作爲回報，您可以使用「僅限觸摸屏」的互動來進行補償。

關於如何適應移動設備webcontent的一個起點可以找到in Apples Developer Library。（尤其是本文的第5節）。

來源

2012-04-19 20:55:24 Christoph

感謝您的回答，但通常ipad使用第一次點擊作爲懸停，第二次點擊，如果沒有特別的定義。那麼是否有一個小的解決方法，擴展，編碼等與qtip2這種行爲？ – Neysor 2012-04-21 07:55:35

如果別人提供了更好的答案，我不認爲我明天有空等待。再次感謝，我會給你+50，但是，使用qtip2獲得解決方案會很酷...... – Neysor 2012-04-25 19:23:20

@Neysor通過提供工具提示中的鏈接來解決這個問題呢？ – Christoph 2012-04-25 19:25:48

如何使移動Safari瀏覽器中的圖像地圖可點擊？

回答

相關問題