Generating a client-side image map

If you are creating a JavaScript client, the Rogue Wave® JViews JavaScript Web application support allows you to create a client-side image map. Image maps are images with an attached map that points out hot spots, or clickable areas. In the Rogue Wave JViews JavaScript Web application support, a clickable area can be generated for each graphic object of the manager.

To create a client side image map:

Define the image map on the server side
Use the image map on the client side

Define the image map on the server side

The servlet provided by Rogue Wave JViews ( IlvManagerServlet) is able to generate an image map for your Rogue Wave JViews application, but it is likely that you do not want to generate a clickable area for every graphic object. On the server side, you must then tell the manager servlet which Rogue Wave JViews layer and which graphic object are part of the image map generation. For both layer and graphic object, this is done by setting a property on them.

On a layer, assuming that the variable manager is an IlvManager, you can set properties as follows:

manager.getManagerLayer(index).setProperty( IlvManagerServlet. 
ImageMapAreaGeneratorProperty, Boolean.TRUE);

On a graphic object you can do almost the same thing, but the value of the property must be an instance of the class IlvImageMapAreaGenerator. This class is responsible for generating the AREA part of the image map.

Note that the same instance of IlvImageMapAreaGenerator can be used for all graphic objects.

By default, IlvImageMapAreaGenerator generates a rectangular area with no HREF in it. You must subclass it to generate an HREF for your graphic object.

Here is an example that creates a custom IlvImageMapAreaGenerator and sets it on some objects:

IlvGraphic object1, object2;
....
IlvImageMapAreaGenerator generator = new IlvImageMapAreaGenerator() {
    public String generateHREF(IlvManagerView v, IlvGraphic obj) {
    String href;
    // place here code the 
    // computes the URL depending on the graphic object
    return href;
  }

};

object1.setProperty(IlvManagerServlet.ImageMapAreaGeneratorProperty,
                      generator);
object2.setProperty(IlvManagerServlet.ImageMapAreaGeneratorProperty,
                      generator);

The HREF can be a URL to which the browser jumps when the area is clicked, but it can also be a call to a JavaScript™ method.

For example, in the XML Grapher example, you can define the generator like this:

IlvImageMapAreaGenerator generator = new IlvImageMapAreaGenerator() {

  public String generateALT(IlvManagerView v, IlvGraphic obj) {
     return ((GrapherNode)obj).getLabel();
  }

  public String generateHREF(IlvManagerView v, IlvGraphic obj) {
     return "javascript:doSomething(’"+
             ((GrapherNode)obj).getLabel()+"’)";
  }
};

In this example, the HREF generated is a call to the JavaScript method doSomething. You must define this method in the HTML page.

For more information about customizing an area, see the IlvImageMapAreaGenerator class in the Java API Reference Manual.

Use the image map on the client side

To tell the JavaScript client to generate a client-side image map, you only need to set the imageMap property of the IlvView JavaScript™ component to true:

var view = new IlvView(40, 40, 300, 400);
view.setRequestURL(’/xmlgrapher/demo.xmlgrapher.servlet.XmlGrapherServlet’);
view.setGenerateImageMap(true);

When this is done, the IlvView component asks the servlet to generate the image map.

To make the image map visible, there are two possibilities. You can:

Directly call the showImageMap method of IlvView:
view.showImageMap();
Use the IlvImageMapInteractor class. This class is a simple interactor that shows the image map when installed and hide it when de-installed.

Current section

Developing basic JViews JavaScript Web applications