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:
<ImageMap xmlns="http://code.google.com/p/flexlib/"
source="usa.jpg"
showToolTips="true"
shapeClick="navigateToURL(new URLRequest(event.href), event.linkTarget)"
>
<map>
<area alt="WA" shape="POLY" coords="85,11,133,11,134,..."
href="http://en.wikipedia.org/wiki/Washington" target="_blank"/>
<area alt="OR" shape="POLY" coords="76,40,83,40,90,48,..."
href="http://en.wikipedia.org/wiki/Oregon" target="_blank"/>
</map>
</ImageMap>
You define the <map> attribute either using MXML or AS (I used MXML in the example above). Then within your map tag you have a series of <area> 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!
This entry was posted
on Tuesday, March 13th, 2007 at 1:30 pm and is filed under Flex.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
March 13th, 2007 at 2:15 pm
Do you ever sleep? Amazing man…
March 13th, 2007 at 2:35 pm
Doug,
Very cool,
Thanks for shared it,
I was looking forward for one component or function like this.
Best,
Ramón
March 13th, 2007 at 4:45 pm
I was thinking about making a Flex component that could sleep for me.
March 13th, 2007 at 7:01 pm
Viacom sued Google for $1 Billion this week….how much do you think we could get for this blatant violation of our rights!?!?!?
Douglas Pope
hotpads.com
March 13th, 2007 at 8:45 pm
Nice man… good work.
Is your sleeper componenet going to extend VideoDisplay and have a “dreams” array property? That could be kinda fun…
March 14th, 2007 at 12:30 am
great component!
its possible to use a video file instead of images?
March 14th, 2007 at 6:23 am
Cool component, thanks!
A cool addition would be a small standalone app that would allow the developer to DRAW the polys visually and output the list of coordinates for pasting into the mxml/as code.
Y’know. Because I’m too lazy to make it myself…
Nice job!
March 14th, 2007 at 8:34 am
[...] ImageMap component added to FlexLib [...]
December 17th, 2007 at 1:49 pm
Your ImageMap is great. I have one question (if I’m allowed to ask here) and that is how do I programmatically extract the area where I clicked? I’m tring to basically say:
public function setSomeProperty(event:Event):void {
someProperty = /* how do I know the area at this point ??? */
}
…
December 19th, 2007 at 9:40 pm
Excellent work! Since it iherits from mx.ontrols.Img, will it properly respond to changes with scaleX and scaleY? I would like to be able to resize the mapped img, but still keep the mapping. Thanks!
March 20th, 2008 at 2:21 pm
I don’t even know if this thread is still open, but I keep getting “Parse error at ”” when I try to build the project.
I’m using Flex 2 under FlashDevelop 3.0.0 Beta 6 with flexlib-.2.4
Thanks!
March 20th, 2008 at 2:23 pm
Sorry, the whole error is:
ImageMap_Sample.mxml(38): col: 4 Error: Parse error at ”.
Any ideas?
April 21st, 2008 at 11:10 pm
I have a question:it works great when everything align to the left, but if you align the image to the center, all the maps are not moving… any suggestions please?
May 2nd, 2008 at 11:09 am
I was wondering if it possible to change the color of each individual map polygon.
Like for example in the current example of USA , when the mouse hovers over some state it will change the color of the state ?
Thanks
December 4th, 2008 at 3:03 pm
You never cease to amaze me, where do you find the time!
I am kind of new to Flex (love it but still getting a grip on the ActionScript side) could you possibly post the code nessary to use the ImageMap component with a ViewStack rather than the navigateToURL command?
Please and Thank You!
April 19th, 2009 at 2:07 pm
What a fine community. I finally needed something like this myself, and voila, Doug to the rescue.
Thank you so much.
Tracy
August 13th, 2009 at 1:32 am
my question :
how to generate the map with outline.now i have a map .i want to district by zone .
it is that meaning how to get to “the coords=”85,11,133,11,134,…”.
how to define Coordinates .
thank you !
October 19th, 2009 at 10:11 am
Hi Doug,
It think that your component is great. (I also bought your book, which helped me a lot).
Any suggestions on how to draw the polys and get the coordinates? At the moment, I just eyeball it, guess the coordinates, and refine it until it looks okay. There has to be a more efficient way. Any suggestions? Is there some way of doing it in photoshop?
Again, thank you so much for your fine component.
-Chris
November 29th, 2009 at 11:20 pm
Dear Doug,
I’m honour to find your project .It helps me a lot.But there are two questions puzzling me!
Q1:
I was wondering if it possible to change the color of each individual map polygon.
Like for example in the current example of USA , when the mouse hovers over some state it will change the color of the state ?
Q2:
how do I programmatically extract the area where I clicked? I’m tring to basically say:
public function setSomeProperty(event:Event):void {
someProperty = /* how do I know the area at this point ??? */
}
…
yours,
Coolala
March 8th, 2010 at 9:29 am
Dear Doug, I’m try to use the imagemap component with actionscript, but i’m a newbie with flex and as. I have the coord stored into a mysql db and i can retreive it with a httpservice into xml format, but i not understand how to put into map tag with as.
Can you help me?
Thanks you in advance,
Paolo
April 29th, 2010 at 4:03 am
Hello all,
I can’t get it to work via Actionscript.
I’d like to set the areas at runtime with values that come from a webservice. It gives a runtime error that my Array cant’t be casted into an flexlib.controls.area
Can somebody give me an example?