1 Reply Latest reply on Oct 19, 2008 8:09 PM by Nick Belaevski

    Client side image map and passing data

    reinhard partmann Newbie

      Hi!

      We're trying to implement a graphical image region selection using mediaOutput. The image itself is not the problem. But:
      The users want tooltips on the clickable areas within an image. That's best done using a client side . But how do I properly pass information on which area within this map was clicked to my JBoss Seam backend?

      simply using "?region=foo" as href doesn't work: The painter bean doesn't receive any parameters in FacesContext.getInstance().getExternalContext().

      How do you properly achieve the desired results:
      * Temporarly storing selected regions clicked from an image map
      * rerender the image map when a region is clicked
      * have tooltips for the areas.

      We had the first two items implemented but this doesn't work with a client side map.

      Any input is appreciated,
      Reinhard

        • 1. Re: Client side image map and passing data
          Nick Belaevski Master

          Hi Reinhard,

          Here is the working page sample:

          <h:form id="form">
           <h:inputText value="#{testBean.size}">
           <f:convertNumber />
           <a4j:support reRender="mapImage, mapGroup" event="onchange"></a4j:support>
           </h:inputText>
          
           <a4j:mediaOutput usemap="#map" id="mapImage" createContent="#{testBean.paint}" element="img" style="width: #{testBean.size}px; height: #{testBean.size}px;"/>
           <h:panelGroup id="mapGroup">
           <map name="map">
           <area shape="rect" coords="0, 0, #{testBean.size / 2}, #{testBean.size / 2}" href="?tl" title="Top-Left" />
           <area shape="rect" coords="#{testBean.size / 2}, 0, #{testBean.size}, #{testBean.size / 2}" href="?tr" title="Top-Right" />
           <area shape="rect" coords="0, #{testBean.size / 2}, #{testBean.size / 2}, #{testBean.size}" href="?bl" title="Bottom-Left" />
           <area shape="rect" coords="#{testBean.size / 2}, #{testBean.size / 2}, #{testBean.size}, #{testBean.size}" href="?br" title="Bottom-Right" />
           </map>
           </h:panelGroup>
          
           </h:form>


          testBean.size - long, 200 by default
          testBean.paint:
          public void paint(OutputStream os, Object o) {
           try {
           FileInputStream fis = new FileInputStream("C:/combos1.png");
          
           int read;
          
           while ((read = fis.read()) != -1) {
           os.write(read);
           }
          
           fis.close();
           } catch (FileNotFoundException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
           } catch (IOException e) {
           // TODO Auto-generated catch block
           e.printStackTrace();
           }
           }