Skip to Content

This blog will show how to use image maps with MII. In the below example whenever the mouse is brought on a region with a green dot on the map the total sales of the region is displayed.The total sales is dynamically picked from  SAP R/3  by  MII.The output is as shown below:

Image

Let us divide this in three parts:

1.The MII configuration

2.The HTML part

3. Using MII object

Let us see the MII configuration required:

For getting the sales value from SAP R/3, a transaction and a corresponding Xacute query is configured.The xacute query provides value in the following format.

Data from query

This query willl be used along with an iGrid display  in the applet in html page as shown.The height and length of the Applet is set to “0” as we don’t want to display this applet.

 

 Now the HTML part:

The image is called using an tag and hot spots are created on the image.Hot spots can be created by using the

and

tags.At every area when the mouse comes over the hotspots two functions are called “showPopup” and “setVariable” and when the mouse is moved out a function “hidePopup” is called. The showPopup and the hidePopup function and using the

and

tag are shown in the complete html page code given at the end of this blog.The setVariable function is explained in “Using MII object”  part.

Using MII object :

The object of the display template which is an iGrid is made in the function setVariable and getCellValue function is used to get the cell values.This values is assigned to the varaible salesValue.An distinguisher variable “hotSpot” is also passed to the function setVariable to identify which hotspot has called the function so that the value can be assigned accordingly.For the sake of simplicity i have called the query and extracted the values by hard coding the cell position.Whereas while calling the query it can be filtered according to the needed value and the performance can be enhanced which would be a much better practice.  

Complete code :

Finally the entire HTML page code is given as shown below.Simply by changing the query template the data to be passed can be changed and by changing the image and the hotspot co-ordinates any image can be used.Hence this could serve as a reusable code.

  

  

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply