HTML Image Map Area touch event not firing

Question

I am making a simple mobile webpage where I have an image with an image map over it. I want the image to change when the user touches the image, and change back when the user lifts their finger. The image is broken into 3 parts, and the image it switches to on touch varies based on which of the 3 areas they touched.

My problem is I cant get the touchstart event to fire for an image map area, on IOS or Android. If I use onmousedown it works properly, but IOS dosnt seem to fire this event until the user has already lifted their finger, which dosnt work for me. I can get ontouchstart to work if I listen for it on a div or image, so I know my event handlers etc are correct.

Does anyone know how I can get my image map to fire the touch events properly, or another html element that can accomplish the same thing?

<html>
<head><title>Touch Test</title></head>
<body>
<script type="text/javascript">

//the handler I want to fire
function onTouchStart(e){
    alert('touch me more');
}

</script>

<div style="height:250px">  
 <div id="log"></div>  
 <div id="logDetails"></div>  

<!--If I dont have the image map over the image, this ontouchstart fires properly--> 
<img src='img/nbsLogo.png' ontouchstart="onTouchStart(event)"  usemap='#imageMap'/>

<!--The touch event fires on this div properly as well-->
<!--<div id="box" style="height:225px;width:225px;background:red;position:absolute;" ontouchmove="touchMove(event)" ontouchstart="onTouchStart(event)"></div>  -->
</div>  

<map id='imageMap' name='imageMap'>

<!-- This touch event never fires.  If I make it onmousedown, it fires properly, but only after the user has lifted their finger-->
<area id='coldDark' title='coldDark' shape='rect' ontouchstart='onTouchStart(event)' coords='0,0,361,272'>
</map>

</body>
</html>

Any help is greatly appreciated

Thank you

Possibly connected: http://stackoverflow.com/questions/2962279/ipad-safaris-mapping-of-mouse-events-to-touch-events-in-image-maps — Ilya Streltsyn, Aug 16 '13 at 16:17

score 0 · Answer 1 · answered Sep 11 '13 at 11:10

0

I have done something like that and used onmouseover works great in ios/android and also in normal browsers. Give it a try.

answered Sep 11 '13 at 11:10

read

340
5
14

score 0 · Answer 2 · edited May 23 '17 at 11:50

I don't think touch events are supported for image maps. I posted a similar question:

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

Take a look at the test that I did and you'll see that I got similar results to yours--somewhat clunky responses to mouse events but no response at all to touch events.

I ended up using the image map coordinates with a div (which does receive touch events) and custom JavaScript hit detection.

HTML Image Map Area touch event not firing

2 Answers2