The document discusses how HTML image maps use coordinate pairs to define rectangular regions of an image and link each region to a different webpage. An image map divides an image into multiple clickable areas by specifying the upper-left and lower-right coordinates of each region. It then uses these coordinate pairs in <area> tags within a <map> to associate each region with a hyperlink.

1. Intro to HTML Image MapsSteven T. JonesCopyright 2010 Steven T. Jones13/21/2010

2. First, We Need an Image…Copyright 2010 Steven T. Jones23/21/2010

3. …300 Pixels Wide and 200 Pixels High (300x200) …1 3001 200Copyright 2010 Steven T. Jones33/21/2010

4. … Giving an “X” Axis of 300 and a ”Y” Axis of 200“X” axis: 300 pixels numbered 0-299 “Y” axis: 200 pixels, 0-199Copyright 2010 Steven T. Jones43/21/2010

5. … Described with Two Pairs of Coordinates:0, 0299, 199Copyright 2010 Steven T. Jones53/21/2010

6. … Described with Two Pairs of Coordinates:Upper left corner0, 0299, 199Copyright 2010 Steven T. Jones63/21/2010

7. … Described with Two Pairs of Coordinates:Upper left corner0, 0LowerRightcorner299, 199Copyright 2010 Steven T. Jones73/21/2010

8. … Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcorner299, 199Copyright 2010 Steven T. Jones83/21/2010

9. … Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin “X”299, 199Copyright 2010 Steven T. Jones93/21/2010

10. … Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin “X”Begin “Y”299, 199Copyright 2010 Steven T. Jones103/21/2010

11. … Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin “X”Begin “Y”End “X”299, 199Copyright 2010 Steven T. Jones113/21/2010

12. … Described with Two Pairs of Coordinates:Upper left corner0, 0from ... through0,0,299,199LowerRightcornerBegin “X”Begin “Y”End “X”End “Y”299, 199Copyright 2010 Steven T. Jones123/21/2010

13. Blue Area Can Be Described in the Same Way:Copyright 2010 Steven T. Jones133/21/2010

14. Blue Area Can Be Described in the Same Way:Upper left cornerUpper left corner –X = 0, Y = 0Copyright 2010 Steven T. Jones143/21/2010

15. Blue Area Can Be Described in the Same Way:Upper left corner Upper left corner –X = 0, Y = 0LowerRightcornerLower rightCorner –X = 99, Y = 124Copyright 2010 Steven T. Jones153/21/2010

16. Blue Area Can Be Described in the Same Way:Upper left corner –X = 0, Y = 00,0,99,124Lower rightCorner –X = 99, Y = 124Copyright 2010 Steven T. Jones163/21/2010

17. Coordinates Describe an HTML Map Area:<area shape="rect" coords="0,0,99,124" ... >Upper left corner –X = 0, Y = 00,0,99,124Lower rightCorner –X = 99, Y = 124Copyright 2010 Steven T. Jones173/21/2010

18. And the Yellow Area:100 2990074199Copyright 2010 Steven T. Jones183/21/2010

19. And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74199Copyright 2010 Steven T. Jones193/21/2010

20. And the Yellow Area:100 2990074Upper LeftX = 100Y = 0100,0,299,74Lower RightX = 299 Y = 74<area shape="rect" coords="100,0,299,74" ... >199Copyright 2010 Steven T. Jones203/21/2010

21. Green and Red Areas Too... 0,0,99,124100,0,299,74Copyright 2010 Steven T. Jones213/21/2010

22. Green and Red Areas Too... 0,0,99,124100,0,299,740,1250,125,99,19999,199Copyright 2010 Steven T. Jones223/21/2010

23. Green and Red Areas Too... 0,0,99,124100,0,299,740,125100,75100,75,299,1990,125,99,199299,19999,199Copyright 2010 Steven T. Jones233/21/2010

24. Green and Red Areas Too... 100 29900740124100,0,299,740,0,99,124100,75,299,1990,125,99,199199199100 2990Copyright 2010 Steven T. Jones243/21/2010

25. Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones253/21/2010

26. Coordinates Used in an HTML Map:<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map>Copyright 2010 Steven T. Jones263/21/2010

27. The Map Applied to the Image<img alt="imgMap (1K)" src="imgMap.gif" height="200" width="300" usemap="#example" />Copyright 2010 Steven T. Jones273/21/2010

28. The Complete HTML<map name="example"><area shape="rect" coords= " 0,0,99,124" href="blue.html" alt="Go to blue page" /><area shape="rect" coords="100,0,299,74" href="yellow.html" alt="Go to yellow page" /><area shape="rect" coords= "0,125,99,199" href="green.html" alt="Go to green page" /><area shape="rect" coords="100,75,299,199" href="red.html" alt="Go to red page" /></map><img alt="imgMap (1K)" src="imgMap.gif“ height="200" width="300“ usemap="#example" />

29. http://www.kokomobeach.comCopyright 2010 Steven T. Jones293/21/2010