Image Map

Definition

This control contains clickable areas which are associated with an image. The id of the imageMap is associated with the image control (using the 'setImageMap' method). The imageMap control contains imageAreas. The imageAreas contain links which define the links or event handling methods that have to be processed when the imageArea has been clicked.

id

Identification name of the imageMap.

Attributes	M	Values	Usage
id	*	String (cs)	Taglib `id="imageMap"` Classlib `setId("imageMap")`

Attributes

Values

Usage

String (cs)

Taglib

id="imageMap"

Classlib

setId("imageMap")

Control API for Image Area (imageArea)

This control is used to define the clickable areas. The areas can be polygons, rectangles and circles. The areas are defined in coordinates. The origin of the coordinates is the upper, left corner of the image.

areaType

Defines the shape of the area:
- CIRCLE
  
  Circular area. The circle is defined by the center and the radius of the circle.
  
  Example (from top=100, from left=200, radius=30): 100,200,30
- POLYGON
  
  The polygon is defined by coordinates of the polygon points.
  
  Example: Triangle (p1=100,100, p2=0,200, p3=200,200): 100,100,0,200,200,200,100,100
- RECTANGLE
  
  Rectangular area. The rectangle is defined by the upper left and lower right corner.
  
  Example (Upper Left= 100,100, Lower Right=300,200): 100,100,300,200
coordinates

Defines the coordinates of the area according to the areaType. The coordinates are separated by commas.
link

Id of the link control that is associated with the imageArea. The link defines the action (link or event) which is performed when the user clicks on this area.
tooltip

Defines the hint of the imageArea which is displayed as the mouse cursor passes over the imageArea, or as the mouse button is pressed but not released.

Attributes	Values	Usage
areaType	CIRCLE POLYGON RECTANGLE	Taglib `areaType="RECTANGLE"` Classlib `setAreaType(ImageAreaType.RECTANGLE)` (See hint below)
coordinates	String	Taglib `coordinates="0,0,100,100"` Classlib `setCoordinates("0,0,100,100")` (See hint below)
link	String (cs)	Taglib `link="idOfLink"` Classlib `setLink(Link link)`
tooltip	String	Taglib `tooltip="a image map"` Classlib `setTooltip("a image map")`

Note

When you use the classlib, the areaType and the coordinates have to specified already when the imageArea is created.

Example:

ImageArea circ_left = new ImageArea (com.sap.htmlb.enum.ImageAreaType.CIRCLE, "12,165,12");

Example

using the taglib

  <hbj:link 
    id="linkID" 
    reference="http://www.sap.com" 
    />
  <hbj:imageMap 
    id="imageMap">
    <hbj:imageArea 
        areaType="RECTANGLE" 
        coordinates="0,0,39,30" 
        link="linkID" 
        tooltip="Click here to go to the SAP site" 
        />
  </hbj:imageMap>
  <hbj:image 
    id="image_logo" 
    alt="Image" 
    imageMapId="imageMap" 
    tooltip="Click on upper/Left area bring you to the SAP site" 
    src="">
    <% 
        IResource 
        rs=componentRequest.getResource(IResource.IMAGE, 
        "mimes/EUFlag.gif"); 
        image_logo.setSrc(rs.getResourceInformation().
                                            getURL(componentRequest)); 
        %>
  </hbj:image>

using the classlib

    see imageMap example in the PDK

Result (from classlib example)