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
Do you ever sleep? Amazing man…
Doug,
Very cool,
Thanks for shared it,
I was looking forward for one component or function like this.
Best,
Ramón
I was thinking about making a Flex component that could sleep for me.
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
Nice man… good work.
Is your sleeper componenet going to extend VideoDisplay and have a “dreams” array property? That could be kinda fun… 🙂
great component!
its possible to use a video file instead of images?
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!
Pingback: MadeInFlex » Blog Archive » Componente ImageMap
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 ??? */
}
…
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! 🙂
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!
Sorry, the whole error is:
ImageMap_Sample.mxml(38): col: 4 Error: Parse error at ”.
Any ideas?
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?
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
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!
What a fine community. I finally needed something like this myself, and voila, Doug to the rescue.
Thank you so much.
Tracy
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 !
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
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
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
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?
Hi friends,
I am struggling to pass (corrds xml formate) into ‘iMap.map’ using actionscript. Can anyone give me an idea ?. if possible send me the piece of code to
Trying to figure out how to fire a function on a specific area shapeOver, shapeOut etc.
Anybody done this? Thanks.