Example 4 : Image Map with JavaScript Handlers

MapJS.html
MapJS.java

This example shows how to add JavaScript Actions to the Image Map of a DynamicImage

Basically this is the same stuff as in the 1. example but the tooltips are replaced by some more sophisticated JavaScript actions.
Possible JavaScript actions are
- Click
- Double click
- Mouse over
- Mouse Out
See the next examples how to add DirectLink actions to the map.

Note

This is static documentation. The image below is just a screenshot. You can see this example live

MapJS.html

			
<script type="text/javascript">
	function showText(text){
		var textNode = document.createTextNode(text);
		var h2tip = document.getElementById("h2tip");
		if(h2tip.firstChild) h2tip.replaceChild(textNode, h2tip.firstChild);
		else h2tip.appendChild(textNode);
	}
	function removeText(){
		var h2tip = document.getElementById("h2tip");
		if(h2tip.firstChild) h2tip.removeChild(h2tip.firstChild);
	}
</script>
		
<div style="height: 50px"><h2 id="h2tip"></h2></div>
		
<img jwcid="@sotacs:DynamicImage" hasMap="ognl:true"
   parameters="ognl:{100, 80, 150}"
	height="200" width="200" painter="painter:paintme" />

MapJS.java

			
public abstract class MapJS extends BasePage{
	
   public void paintme(Graphics2D g2d, IPainterContext context){
       // Enable antialiasing for shapes
       g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                            RenderingHints.VALUE_ANTIALIAS_ON);
	   
       //white background
       g2d.setColor(Color.WHITE);
       g2d.fillRect(0,0, context.getWidth(), context.getHeight());

       //draw the time string
	   g2d.setColor(Color.BLACK);
	   g2d.drawString("produced " + new Date(), 0, 180);
	   
	   //draw a green triangle
	   g2d.setColor(Color.GREEN);
	   Polygon triangle = new Polygon(new int[]{130, 150, 170}, new int[]{0, 60, 0},3); 
	   g2d.fill(triangle);
	   //and declare the image map area
	   MapArea area = new PolygonMapArea(triangle);
	   area.setOnMouseOverHandler("showText('You are moving over the green triangle')");
	   area.setOnMouseOutHandler("removeText()");
	   context.addMapArea(area);
	  
	   //draw a black circle
	   g2d.setColor(Color.BLACK);
	   g2d.fillOval(0, 0, 60, 60);
	   //... and declare the image map area
	   area = new CircleMapArea(30,30,30);
	   area.setOnMouseOverHandler("showText('You are moving over the black circle')");
	   area.setOnMouseOutHandler("removeText()");
	   context.addMapArea(area);
	   
	   
	   //draw the 3 bars
	   Color[] colors = new Color[]{Color.RED, Color.BLUE, Color.BLUE.darker()};
	   Rectangle[] bars = new Rectangle[3];
	   for (int i = 0; i < 3; i++) {
		   int value = (Integer)context.getParameters()[i];
		   g2d.setColor(colors[i]);
		   bars[i] = new Rectangle(0, 80 + 30 * i, value, 20);
		   g2d.fill(bars[i]);
		   //... and declare the image map area
		   area = new RectangleMapArea(bars[i]);
		   area.setOnMouseOverHandler("showText('Results of 200"+i+" : "+value+"$')");
		   area.setOnMouseOutHandler("removeText()");
		   context.addMapArea(area);
	   }
   }
}