I'm using image map on my web page and iPad app. Each area on the image map is a clickable element to make sound, which I can do easily with jQuery. But I haven't been able to change the style, like either showing the border, or change the fill color just to indicate that the area is clicked. If anybody has done this, please let me know; it seems simple, but I'm really stumped.
Use the <area> tag to define area in an image map in HTML. Specifies an alternate text for the area. Specifies the coordinates appropriate to the shape attribute to define a region of an image for image maps.
The <map> HTML element is used with <area> elements to define an image map (a clickable link area).
An image map is an image with clickable areas. The areas are defined with one or more <area> tags.
Elements required in Mapping an Image :Map : It is used to create a map of the image with clickable areas. Image : It is used for the image source on which mapping is done. Area : It is used within the map for defining clickable areas.
I got it to work thanks to James Treworgy's awesome ImageMaster Jquery plugin.
$('area').mousedown(function(e) {
$(this).mapster('set',true);
});
$('area').mouseup(function(e) {
$(this).mapster('set',false);
});
$('area').bind( "touchstart", function(e){
$(this).mapster('set',true);
});
$('area').bind( "touchend", function(e){
$(this).mapster('set',false);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With