How to render an image with map with JSF/Richfaces ?

Question

I want to perform the followning task using JSF / Richfaces

On click of a link - I would like to generate a PNG image with map (portion of the image should be click-able) and render under a panel.

When I generate the image, I know the co-ordinates of the image which needs to be click-able. So I can generate the map. But I want to do it under one XHTML file. Can rich:paint2d tag accept map like -

<map name="mapGraph">
    <area coords="754,378 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="33,439 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="393,425 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="573,378 20" href="http://google.com" shape="Circle" alt="Drill Down">
    <area coords="213,407 20" href="http://yahoo.com" shape="Circle" alt="Drill Down">
</map>

Answer 1

There is no default way to achieve this. Only way is to develop your own JSF custom component. I developed my own JSF tag like <custom:image id = "im1" width="800px" height="400px" useMap="dwMap"/>. The JSF engne when finds this tag - renders an html tag "img" with a map like

<img  width="800" border="0" height="400" useMap="#dwMap" src="/imageB94DFA031CA999EE65ED586627F630BE.png"/>
<map name="dwMap"><area coords="735,225 20" shape="Circle" onMouseOver="call('735,225 20')" title="Start Time : 2009-02-16 15:32:48
End Time : 2009-02-16 15:34:59" /><area coords="570,225 20" shape="Circle" onMouseOver="call('570,225 20')" title="Start Time : 2009-02-16 15:32:27
End Time : 2009-02-16 15:32:39" /><area coords="405,237 20" shape="Circle" onMouseOver="call('405,237 20')" title="Start Time : 2009-02-16 15:14:41
End Time : 2009-02-16 15:16:58" /><area coords="241,215 20" shape="Circle" onMouseOver="call('241,215 20')" title="Start Time : 2009-02-16 15:13:50
End Time : 2009-02-16 15:14:00" /><area coords="76,181 20" shape="Circle" onMouseOver="call('76,181 20')" title="Start Time : 2009-02-13 17:57:31
End Time : 2009-02-13 17:58:18" /></map>

Though it sounds complicated to develop one custom component in JSF, but it is really easy. One can follow the article "JSF for nonbelievers" by Richard Hightower and developing a custom component becomes as easy as possible.