如何使图像映射在移动野生动物园上可点击

Question

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

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

但是在移动野生动物园（ipad/iphone）上，不可能获得URL的链接。每次你点击地图时，就像你把鼠标悬停在电脑上一样，但从来没有点击过。

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

<img src="https://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非常小，有^（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） 基于图像映射演示

Answer 1

这是

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

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

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

有关如何使Web内容适应移动设备的起点可以在Apple的开发人员库中找到。（特别是本文的第 5 条）。