1. Linking Using Image Maps

2. What is an Image Map? An image map is an image in which several areas of an image are linked to different sites The areas of an image map which are linked are called “hot spots”

3. The Two Types of Image Maps Client Side Image Maps Coordinate and URL information contained within the HTML script Server Side Image Maps Map information resides in a “.map” file and is processed using a CGI script

4. Creating a Client Side Image Map STEP ONE: Create the image that will be used. Save it as a “.gif” or “.jpg”

5. Creating a Client Side Image Map STEP TWO: Identify the intended “hot spots” of the image map and figure coordinates of the spots.

6. Figuring Coordinates - Rectangle Upper left-most corner of image is coordinate 0,0 Rectangles are measured using 2 coordinates: Upper left-most pixel Lower right-most pixel 29,26 x y 213,77 x y

7. Figuring Coordinates - Circle Upper left-most corner of image is coordinate 0,0 Rectangles are measured using 3 coordinates: X & Y of the center of the circle Radius of the circle 265,57,40 x y r

8. Creating a Client Side Image Map STEP THREE: Write the script for the map. …

9. Syntax of Map Script … is the parent container Attributes: name (uniquely identifies the map; name is required)

10. Syntax of Map Script tag identifies the different “hot spots” of the map Required Attributes: shape coords href

11. Syntax of Map Script …

12. Creating a Client Side Image Map STEP FOUR: Link to your image map using the “usemap” attribute of the tag Notice the “border” attribute. This is set to zero to prevent borders. This is recommended in image maps! Example:

13. But Wait … There’s More! In addition to client side and server side image maps, we can use tables to create a “poor man’s” image map

14. Creating a “Poor Man’s” Image Map STEP ONE: Divide the image into at least two separate “sub-images” using a graphics package.

15. Creating a “Poor Man’s” Image Map STEP TWO: Put each “sub-image” in a table cell and make the image “hot” Use a basic table structure Set the border, cellpadding and cellspacing attributes to “0” (zero) No spaces or page breaks between tags included between … ! Example:

16. Questions?