1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate and the second number is the y-coordinate Microsoft Paint may be used to find the coordinate pairs of images

2 Mapping Coordinates x- and y- coordinates on the Status Bar coordinate point (0,0)

3 Coding the Map Mapping tags  and Creates a client-side image map  and COORDS attribute

4 Mapping Image Coordinates Four shapes of map areas  Rectangle  Single Point  Circle  Polygon

5 Mapping Image Coordinates rectangle circle polygon single point

6 Mapping Image Coordinates Rectangles  Retrieve coordinates of top-left and bottom-right corners Circles  Retrieve coordinates of the center point and the radius in pixels Single Point  Retrieve the coordinates of the point Polygon  Retrieve the coordinates for each corner of the shape

7 Mapping Image Coordinates

8 Starting Paint (Photoshop) PC: Click the Start button on the taskbar Point to Programs on the Start menu, Point to Accessories on the Programs submenu, and then point to Paint on the Accessories submenu Mac: Go to the “Applications” folder and open “Adobe Photoshop 7”

9 Click Paint. Maximize the window, if necessary

10 The Paint Window Drawing Area  Where the image displays Toolbox  Displays tools you can use to edit or draw your image Menu bar  Shows the Paint menu names Status bar  Displays the coordinates of the center of the mouse pointer at its current position on the image

11 drawing area status bar toolbox menu bar

12 Opening an Image Open up the public folder, then open up the “Web Design Folder”. Open up the “web des 1” folder. In Paint, click File on the menu bar and then click Open. Click “surfmap.gif” on the list of files displayed. Click the Open button in the Open dialog box

13

14 Locating the X- and Y- Coordinates X- and y- coordinates begin with (0,0) in the top-left corner of the image We will first be finding the top-left corner of each rectangular clickable area, as well as the bottom-right corner

15 Locating the X- and Y- Coordinates top-left corners bottom-right corners

16 Locating the X- and Y- Coordinates

17 Coding the Image Map Using Tags and Attributes The and tags start and end each image map In the tag, you insert the shape, coordinates, alternate text, and the URL for the link

18 Image Map Tag Attributes

19 Start Notepad

20 Enter Initial HTML Tags