Setting up a Web Site - HTML

Part 6 - Image Maps

Description of Image Maps

Images in appropriate file format( GIF , JPEG )
Hot spots defined as areas of image
Links to URL

Sample Image

A sample GIF file used as an image map:

Hot spots to be defined (with coordinates):

Rectangle: 132,12 347,122
Circle: 92,189 124,232
Polygon: 478,60 393,70 371,142 297,152 287,240 467,231 478,60

Server Side Image Maps

Uses the WWW server to process
Only type supported in earlier browsers
Uses the anchor tag
Requires separate map file

Format of anchor and image tags for map:

<A HREF = "demo.map"> <IMG SRC = "map.gif" ISMAP> </A>

Contents of file demo.map:

rect spot1.htm 132,12 347,122 circle spot2.htm 92,189 124,232 poly spot3.htm 478,60 393,70 371,142 297,152 287,240 467,231 478,60 default nospot.htm

Client Side Image Maps

Uses the browser to process
Supported in newer browsers (Netscape 2+)
Uses special map tags
More efficient for servers

Same image map using client side commands:

<IMG SRC="map.gif" USEMAP="#MAPDEMO"> <MAP NAME="MAPDEMO"> <AREA SHAPE="rect" COORDS="132,12,347,122" HREF="spot1.html"> <AREA SHAPE="circle" COORDS="92,189,53" HREF="spot2.html"> <AREA SHAPE="polygon" COORDS="478,60,393,70,371,142,297,152,287,240,467,231,478,60" HREF="spot3.html"> <AREA SHAPE="rect" HREF="nospot.htm" COORDS="0,0,499,249"> </MAP>

Supporting Both

Take advantage of client side while supporting older browsers:

<A HREF = "demo.map"> <IMG SRC = "map.gif" ISMAP USEMAP="#MAPDEMO"> </A>

Go to Top of Page

Back to Contents Page On to Next Section

Setting Up a Web Site
1998 MSACROA Conference
Monday, November 30, 1998