I’ve added a new Flex component to FlexLib: an ImageMap component that is an attempt to replicate client-side image maps in HTML. If you know about image maps in HTML then this component should be self-explanatory. Basically it lets you define clickable areas of an image, either rectangles, circles, or polygons. THe component dispatches various events for those hotspots, such as mouse over, mouse out, click, etc. So you can capture the mouse events and do whatever you want, like launch the link by using navigateToURL(), which is what would most closely resemble the HTML image-map functionality. But you can also do anything else you want when the event fires.

I tried to make it so you could basically just copy/paste the HTML code that you have for an existing client-side image map. So your MXML might look like this:

You define the attribute either using MXML or AS (I used MXML in the example above). Then within your map tag you have a series of tags. Each area tag should have a shape attribute and a coord attribute. Basically you should be able to generate your image map in whatever you use already (DreamWeaver, etc) and just copy and paste it into your MXML Flex app.

View the documentation
View the source of the example MXML file.

To get the source of the ImageMap component, download the FlexLib project from Google code.

Here’s the example:

P.S. I stole the image map of the USA from the fine people at HotPads.com. Don’t sue me guys!