Image Maps with Flash/Flex & jQuery

Question

Is there anyway to create an image map in Flash/Flex, and have it as a scriptable element in the DOM through jQuery?

I currently have a standard HTML image map that, when a certain selection is clicked, checks a checkbox on a form on the same page (via javascript). I'd like to replace it with something more visually appealing, so I thought that Flash/Flex & jQuery might be a neat way to go, but I don't know if Flex can talk to jQuery very easily.

As a related question, if I have form elements in a Flex component (like the selected map areas), and I post the form using an HTML component on the same page, will the values of the Flex fields post alongside the HTML fields?

(Note: I'm aware of CSS Image sprites, and have concluded that it won't work for my project; too many irregular shapes too close together, and I'd be sacrificing too much accuracy if I went that route.)

Answer 1

Javascript and Flash plays along nicely. Check the ExternalInterface class definition in the API. With that, it should be fairly easy to invoke Flash routines from Javascript, and vice versa.

It shouldn't be too difficult either to create a click map in Flash. You can create a sprite for each clickable area: it is easy to draw rectangular, circular, and polygon shapes in flash.

As for the form related question: no, posting an HTML form will not post the form in your Flash app. That being said, there is no reason why you couldn't use the mentioned ExternalInterface and javascript to copy the form fields from Flash into hidden HTML form elements before submitting the form.

HTH