Are Touch Events in HTML Image Maps Supported in iOS/Mobile Safari

Question

Can anyone tell me, definitively, if html image maps support touch events in Mobile Safari? I need to use image maps because I have clickable areas that are irregularly shaped. My testing shows that mouse events are supported (but in a limited way) and that touch events don't seem to fire at all.

I did this simplest test:

http://jsfiddle.net/DsRhu/6/

<img id="polygon_images" src="http://s18.postimg.org/7xvo1f9tl/polygons.png" alt="Polygons" border="0" usemap="#my_polygons" />

<map id="my_polygons" name="my_polygons">
<area shape="poly" alt="blue" title="Mouse" coords="95,40,171,99,139,189,37,188,14,96"  onmousedown="writeMessage(event, 'm-down');" onmouseup="writeMessage(event, 'm-up');" onmousemove="writeMessage(event, 'm-move');" onmouseout="writeMessage(event, 'm-out');" />
<area shape="poly" alt="red" title="Touch" coords="269,42,345,96,317,191,215,189,193,97"   ontouchstart ="writeMessage(event, 't-start');" ontouchend="writeMessage(event, 't-end');" ontouchmove="writeMessage(event, 't-move');" ontouchcancel="writeMessage(event, 't-cancel');"  />
</map>

<div id="message_box"></div>

The blue polygon is rigged for mouse events. The red polygon is rigged for touch events.

When I view this page in regular Safari, clicking or hovering over the blue polygon fires off events as I would expect. And, of course, the red polygon does nothing (since touch events are not supported on the desktop)

However, when I view this page on my iPad, The blue polygon fires a triplet of mousemove, mousedown, mouseup on single tap and nothing else. Worse yet, touching the red polygon does nothing!

I'm totally hoping that I just missed something simple but if not, I'd really like to know for sure what's going on.

Vibratile

Answer 1

It's been a few months and no one else has provided a more definitive answer so I thought it best to respond with my own findings:

1) Touch events on image maps DO NOT seem to be supported in mobile safari at all.

2) Even though mouse events are supported, they don't provide enough control to do anything more than a single selection (as I mention above, firing mousemove, mousedown and mouseup all at once)--and even then it's not as responsive as I (or anyone else ;) would like.

Solution:

I ended up placing the image inside a div tag (which DOES support all the touch events) and then doing my own hit detection based on the original image map data.

Not the most ideal solution but it worked and performed well. Hope this helps someone else...

Vibratile