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")

 

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	M	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")

 

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)