Anyone got an elegant clickable image map solutions

[gothmog]

Hi,

I need a map with regions that hilight on hover and fire a server side event when clicked?

Anyone done this

Cheers

Troy

[danielc.roth]

I have used this
and the js-library he uses to highlight.

Then I used Seam's Remote API to fire events @ onclick. One needs to do some manual work, but you only need to do it once.

Hope it helps!

[gothmog]

Hi Daniel,

I had a go with this and didn't get very far. :( Any chance of posting your solution or sending to me at [e-mail] ?

Cheers

Troy

[danielc.roth]

Here are some snippets. I use war deployment and javabeans...

index.xhtml

<s:remote include="map" />
<script type="text/javascript" src="jquery-1.2.3.pack.js">
</script>
<script type="text/javascript" src="jquery.maphilight.min.js">
</script>

<script>
   $(function() {
      $('.map').maphilight();
   });
</script>


<script type="text/javascript">
  //<![CDATA[

  function choose(id) {
    Seam.Component.getInstance("map").choose(id, callback);
  }

  function callback(result) {
       // ... 
  }

   // ]]>

<h:panelGrid style="margin-left: 80px">
  <f:verbatim>
   <img class="map" src="img/map.png" usemap="#myMap" border="0" />
     <map id="myMap" name="myMap">
      <area onclick="javascript:choose(1);" shape="poly" coords="53,571, 54,573, 56,571, 55,570, 53,571"/>
      .
      .
      .
    </map>
  </f:verbatim>
</h:panelGrid>

JavaBean Map.java

@Name("map")
@Scope(ScopeType.CONVERSATION)
@SuppressWarnings("unchecked")
public class Map implements Serializable {

    @WebRemote
    public void choose(int i) {
        // Do logic
    }

}

[gothmog]

Thanks Daniel,

You are a legend mate!!

Cheers

Troy