Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How change image map area element style

Tags:

css

image

map

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.

like image 912
David Zhao Avatar asked Aug 07 '11 00:08

David Zhao


People also ask

How do you define different areas in an image map?

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.

Which element is used to define map area of image map?

The <map> HTML element is used with <area> elements to define an image map (a clickable link area).

What is an image map in CSS?

An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

What is image mapping and what are elements required in mapping an image?

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.


1 Answers

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);
});
like image 69
David Zhao Avatar answered Oct 26 '22 11:10

David Zhao