Getting an irregular area in a web page (much like a Java GeneralPath or Polygon)

views:

answers:

Getting an irregular area in a web page (much like a Java GeneralPath or Polygon)

Is it possible to create an arbitrary shape on a web page so we can detect mouse overs/outs on it? It's much like an area map for an image but corresponds to a page (or a div etc) rather than an image.

This might be a non starter altogether as I haven't found any information in this area. Thought I'll just ask here to see if there is any way to achieve this.

My original requirement is to provide an area map for a set of images such that one area corresponds to a list of prearranged images so any points in area can be mapped onto a specific image in that list using that image's position.

Any information will be helpful.

+2 A:

There is the <map> HTML element that allows the definition of geometrical primitives and even polygons.

The <area> elements defining the areas inside the map support standard mouseover and mouseout events.

There are javascript-/jQuery-based extensions to even highlight map areas. See this question for more info.

Pekka 2010-09-08 11:19:48

I need to apply a map to more than one images. Let's say, in the US map demo from question you provided, we split the image vertically so state Texas spans on both images. Now, I need to provide a map such that when mouse overs anywhere on Texas (even thought it's split across more than one images) it behaves as one map. I can always provide more than one maps (one for each image) but that'll complicate my logic a lot.

riz 2010-09-08 11:27:41

@riz that might not be a problem: You might be able to have multiple images using absolute positioning, but just one map. You would bind the map to a transparent big image, and put the images underneath.

Pekka 2010-09-08 11:30:46

@Pekka Yes. It works. Thanks.

riz 2010-09-08 12:32:58

ansaurus

tags:

views:

answers:

Getting an irregular area in a web page (much like a Java GeneralPath or Polygon)

related questions