Map Sampler

Click on the CICS or DB2 portion of the image.

Maps

Purpose:

Maps give you the ability to carve up a single graphic image into multiple addressable parts as if the picture was comprised of more than one graphic file. Then when the user clicks on part of the image, you can display another web page that is related to what the user clicked on. As such, maps enhance the user interface that you must build into your web site.

Uses:

  1. Geographic maps like this and this
  2. Layout of the human body like this
  3. Anything that is better presented as a picture rather than hypertext

How to use maps in HTML:

  1. use width and height attributes of the <img> tag to rectangularize the picture: 

    	<img src="subsys.jpg" width=300 height=300>

  2. add the usemap attribute to the <img> tag: 

    	<img src="subsys.jpg" width=300 height=300 usemap="#map1">

  3. Further down in your HTML, add a map reference called map1 as shown: 

    	<map name="map1">
		<!--           X1  Y1  X2  Y2  page to display  -->
		<area coords="125, 20,175, 50" href="htmlcics.htm">
		<area coords=" 75,200,125,230" href="htmldb2.htm">
	</map>

    The coordinates given are upperleft corner (X1,Y1) and lower right corner (X2,Y2) and are in pixels. The most upperleft corner is (0,0) While the most lowerright corner is (300,300).

    I exert control over the coordinate system by reiszing the picture with the height and width attributes.

  4. Please note that the ismap attribute is for server side use and requires programming on the server.