Question

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.

Answer 1

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.