ImageMap: The Circle
You clicked on the CIRCLE.
This is an ImageMaps intent, to make an image useful. The links to the ImageMap is the difficult part, it has to be done in a certain way. Here's the code to our example:
|
<!--WEBBOT bot="ImageMap" circle="(90,155) (39) circle.php" rectangle="(107,68) (338,118) bar.php" rectangle="(12,26) (98,112) square.php" polygon="(147,198) (204,127) (278,198) (147,198) triangle.php" src="images/colleges.jpg" width="350" height="210" ISMAP STARTSPAN--><map id="ClickMap" name="ClickMap"> <area shape="circle" coords="90,155,39" href="circle.php" alt="The Circle"> <area shape="rect" coords="107,68,338,118" href="bar.php" alt="The Bar"> <area shape="rect" coords="12,26,98,112" href="square.php" alt="The Square"> <area shape="poly" coords="147,198,204,127,278,198,147,198" href="triangle.php" alt="The Triangle"> <area shape="default" alt="Just click in a shape." nohref> </map><img src="images/click.gif" width="350" height="210" border="0" alt="Just click in a shape." ismap usemap="#ClickMap"><!--WEBBOT bot="ImageMap" ENDSPAN--> |
WEBBOT
The WEBBOT section is for extended browser support, making the links accessible with the TAB button for older or less compatible browsers. This section SPAN's the entire image map area, encompassing all of the ImageMap code.
MAP
Then the MAP section provides the client side mapping while increasing accessibility to your links. This section increases accessibility by providing alternate text descriptions in many browsers. Not too hard, just takes a little practice.
Code Order
You might notice that the order that the links appear in the code determines the order that they are tabbed to within the image. (Go back and try it to see how this works.)
