1

我正在使用jQuery和qTip2使图像地图上的地理信息可见。您可以在 JSFiddle |上查看演示。小提琴屏幕结果

在桌面浏览器上一切正常。悬停时您会看到工具提示，单击时您会转到标签定义的URL 。href

但在移动 safari (ipad/iphone) 上，无法获取到 URL 的链接。每次单击地图时，就像您将鼠标悬停在电脑上一样，但绝不会单击。

该图像是使用标准 html 创建的：

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

带有(2)的 jQuery 非常小：

$(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)基于imagemap demo

4

1 回答 1

1

这是合乎逻辑的。曾经尝试过悬停在触摸屏上吗？:-D

由于移动设备缺乏悬停功能，因此您需要调整呈现数据的方式，以完全支持它们。

  1. 对于移动设备用户，您需要绝对清楚:hover桌面浏览器上的操作将在何处发生。让这些地方“从地图中弹出”，这样他们就不用悬停就知道在哪里检索信息。
  2. 您需要:hover用适当的触摸屏操作替换每个操作。例如，在点击时提供工具提示并将链接放在工具提示内以补偿缺少的悬停动作。
  3. 作为回报，您可以使用“仅触摸屏”交互来补偿。

可以在 Apples Developer Library中找到有关如何为移动设备调整 Web 内容的起点。（特别是本文的第 5 节）。

于 2012-04-19T20:55:24.963 回答