如何使图像地图可以在移动野生动物园上点击?

时间:2012-04-12 11:15:50

标签: javascript jquery mobile-safari imagemap qtip2

我正在使用jQueryqTip2在图片地图上显示地理信息。您可以看到演示here on JSFiddle | Fiddle Screen result

在桌面浏览器上一切正常。 on-hover 您会看到工具提示点击,转到 {定义的网址 {1}} 标记。

但是在手机游戏(ipad / iphone)上,无法获得指向URL的链接。每次你点击地图,就像你在电脑上悬停,但从不点击。

使用标准html创建图像:

href

此外,地图是使用标准html创建的,但附加属性工具提示(1)

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

(2)

,jQuery非常小巧
<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>

那么我怎么能解决这个问题呢?




(1)我知道这个属性应该是data-tooltip。这将很快改变。

(2)基于imagemap demo

1 个答案:

答案 0 :(得分:1)

这是合乎逻辑的。曾经尝试过在触摸屏上徘徊? :-D

由于移动设备无法悬停,因此您需要调整呈现数据的方式,以完全支持它们。

  1. 对于移动设备用户,您需要绝对清楚地了解桌面浏览器上的:hover操作的位置。使地点“弹出地图”,这样他们就可以知道没有悬停,在哪里检索信息。
  2. 您需要使用适当的触摸屏操作替换每个:hover操作。例如,提供工具提示,并将工具提示放在工具提示中,以补偿丢失的悬停操作。
  3. 作为回报,您可以利用“仅限触摸屏”的互动进行补偿。
  4. 可以找到关于如何使您的webcontent适应移动设备的起点in Apples Developer Library。 (特别是本文§5)。