Chapter 5

1. Chapter 5 Creating anImage Map

2. Chapter Objectives • Defineterms relating to imagemapping • List the differences between server-side and client-sideimagemaps • Name the twocomponents of an imagemap and describe the steps to implement an imagemap • Distinguish between appropriate and inappropriateimages for mapping • Sketchhotspots on an image Chapter 5: Creating an Image Map

3. Chapter Objectives • Describe how the x- and y-coordinatesrelate to vertical and horizontal alignment • Open an image in Paint and use Paint to map the coordinates • Create the homepage and additionalWebpages • Create a table, insert an image into a table, and use the usemapattribute to define an imagemap Chapter 5: Creating an Image Map

4. Chapter Objectives • Addtext to a table cell and create a horizontalmenubar with textlinks • Use the <map> </map> tags to start and end a map • Use the <area> tag to indicate the shape, coordinates, and URL for a mappedarea • Changelinkcolors Chapter 5: Creating an Image Map

5. Creating an Image Map • Imagemap – 2 components • Image • Map definition • Hotspots • URLs to which they link • Selecting Images • Not all images appropriate for image mapping • Good choice – image with visual sections • Example USA map Chapter 5: Creating an Image Map

6. Creating an Image Map • Sketching the Borders of Hotspots • Clickable areas within the image • Good choice – image with visual sections • Example USA map • Mapping Image Coordinates • After determining how to divide image into areas, must determine the x and y coordinates for those sections • x-axis – runs horizontally along base of image • y-axis – runs vertically along the left of image • Point(0,0) – top left corner of image • First number of coordinate pair is x-coordinate Chapter 5: Creating an Image Map

7. Creating an Image Map • Software for Image Mapping • Simple or sophisticated image editing or paint program can be used to determine the x and y coordinates for various imagepoints • Paint program – used in this chapter’s project • Example USA map • 3 shapes for mapping areas(see next slide) • Rectangle – coordinates top-left and bottom-right corners • Circle – use center point and radius as coordinates • Polygon – use each corner point coordinate Note: to definemap area of image, must determine the x and y coordinates for that shape, then insert the coordinates for the various map shapes into the HTML code Chapter 5: Creating an Image Map

8. Creating an Image Map determine the x and y coordinates for various imagepoints Chapter 5: Creating an Image Map 8

9. Creating an Image Map • Coding the Map • Final step in an image map is writingHTMLcode for the map • Client-side image map - tags <map></map> and <area> used • <area> tagdefines specific areas of the map and the links and anchors those areas. • X and y coordinates for each map area inserted into <area> tag with coords attribute with quotationmarks separated by commas Chapter 5: Creating an Image Map 9

10. Starting Paint Color box(might appearat bottom) toolbox drawing area Chapter 5: Creating an Image Map

11. Opening an Image File in Paint southwest.jpgimage open inPaint window Pencil buttonselected bydefault Chapter 5: Creating an Image Map

12. Locating X- and Y- Coordinates of an Image Point used forNevada link Mousepointer Pencilbutton Pencil tool at x- andy-coordinates (234,177) Point used forCalifornia link x- and y-coordinates (234,177) on status bar Chapter 5: Creating an Image Map

13. Starting Notepad and Entering Initial HTML Tags HTML Template.html Chapter 5: Creating an Image Map

14. Creating a Table <table> tagalign content at top vertically Chapter 5: Creating an Image Map

15. Inserting an Image to Use as an Image Map hspace attributeadds horizontalspace around image usemap attribute tellsbrowser what image map to use <img> tag with source, width, andheight attributes Chapter 5: Creating an Image Map

16. Adding a Header and Text to a Table Cell Name of file forSouthwest header Paragraphsof text Chapter 5: Creating an Image Map

17. Creating a Horizontal Menu Bar with Text Links HTML code shown in Table 5–6 Chapter 5: Creating an Image Map

18. Creating a Horizontal Menu Bar with Text Links Horizontal menu bar with textlinks to three Web pages thatcorrespond to three hotspotson image map Chapter 5: Creating an Image Map

19. Creating an Image Map • HTML code shown in Table 5–8 Chapter 5: Creating an Image Map

20. Creating an Image Map name and id attributescorrespond with mapname used in <img> tag on line 16 Three <area> tagsthat map three states in southwest.jpgmap X- and y- coordinates are pairsof numbers that correspond topoints on the map polygons;5 pairs for Arizona and Nevada7 pairs for California all three hotspots arepolygon shaped Chapter 5: Creating an Image Map

21. Validating, Viewing, and Printing a Web Page Paragraphsof text image map E-mail link Horizontalmenu bar Chapter 5: Creating an Image Map

22. Creating a Second Web Page headerimage AZ flagimage Horizontal menubar with links to allother Web pages Image relevantto Arizona Two-column table of facts about AZ Chapter 5: Creating an Image Map 22

23. Adding a Heading HTML code shown in Table 5–9 Image of AZ flagfor top, left sideof Web page Image of AZheader for center, top of Web page Chapter 5: Creating an Image Map

24. Adding a Horizontal Menu Bar • HTML code shown in Table 5–10, pressing the Horizontal menubar same as that onhome page; provideseasy acces to all Webpages on Web site Chapter 5: Creating an Image Map

25. Adding Information and an Image HTML code shown in Table 5–11 Image of cactuson ArizonaWeb page Table of factsabout state ofArizona Chapter 5: Creating an Image Map

26. Adding Information and an Image Image of cactuson ArizonaWeb page Table of factsabout state ofArizona Chapter 5: Creating an Image Map

27. Adding Additional Information Remainder ofAZ facts putin a table Chapter 5: Creating an Image Map

28. Validating, Viewing, and Printing the Web Page AZ headerimage Horizontal menubar with links to allother Web pages Image ofcactus Table of factsabout Arizona Chapter 5: Creating an Image Map

29. Testing the Links CaliforniaWeb page Chapter 5: Creating an Image Map

30. Chapter Summary • Defineterms relating to imagemapping • List the differences between server-side and client-side image maps • Name the twocomponents of an imagemap and describe the steps to implement an imagemap • Distinguish between appropriate and inappropriateimages for mapping • Sketchhotspots on an image Chapter 5: Creating an Image Map

31. Chapter Summary • Describe how the x- and y-coordinates relate to vertical and horizontal alignment • Open an image in Paint and usePaint to map the coordinates • Create the homepage and additionalWebpages • Create a table, insert an image into a table, and use the usemapattribute to define a map Chapter 5: Creating an Image Map

32. Chapter Summary • Addtext to a table cell and create a horizontalmenubar with textlinks • Use the <map> </map> tags to start and end a map • Use the <area> tag to indicate the shape, coordinates, and URL for a mappedarea • Changelinkcolors Chapter 5: Creating an Image Map

33. Homework # 9 In the Lab 1 page HTML 251-252 Creating a Donation Analysis Page SeeINF 186 Computer Assignment 9 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site 33

34. Chapter 5 Complete Creating anImage Map