Question

I have an areamap that, when the user moves the mouse over/out the different map area items, I show/hide an image next to the areamap image. I also capture the click on a map area item and perform some functionality. Now, I want to have this work for users on a device without a mouse (i.e. a finger).

The code I have for the mouse over/out/click is:

$('area[id^="maparea"]').mouseover(function () {
    // show image associated with this map area item
});
$('area[id^="maparea"]').mouseout(function () {
// hide image associated with this map area item
});
$('area[id^="maparea"]').click(function () {
    // select the image associated with the map area item
});

How can I have similar functionality with the touch events?

The click event should continue to work as is. It’s the dynamic changing of the image as you move your finger around the area map (without lifting the finger) that I’m interested in.

Thanks in advance.

Answer 1

You need to use specific touch library like

http://danielglyde.blogspot.co.uk/2012/08/touchit-jquery-plugin-for-touch-events.html