Chapter 5 Creating an Image Map

Chapter Objectives Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map and describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping Sketch hotspots on an image Chapter 5: Creating an Image Map

Chapter Objectives Describe how the x- and y-coordinates relate to vertical and horizontal alignment Open an image in Paint and use Paint to map the coordinates Create the home page and additional Web pages Create a table, insert an image into a table, and use the usemap attribute to define an image map Chapter 5: Creating an Image Map

Chapter Objectives Add text to a table cell and create a horizontal menu bar with text links Use the <map> </map> tags to start and end a map Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area Change link colors Chapter 5: Creating an Image Map

Creating an Image Map Image map – 2 components Selecting Images 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

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

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 image points 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 define map 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

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

Creating an Image Map Coding the Map Final step in an image map is writing HTML code for the map Client-side image map - tags <map></map> and <area> used <area> tag defines 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 quotation marks separated by commas Chapter 5: Creating an Image Map 9 9

Color box (might appear at bottom) Starting Paint Color box (might appear at bottom) toolbox drawing area Chapter 5: Creating an Image Map

Opening an Image File in Paint southwest.jpg image open in Paint window Pencil button selected by default Chapter 5: Creating an Image Map

Locating X- and Y- Coordinates of an Image Point used for Nevada link Mouse pointer Pencil button Pencil tool at x- and y-coordinates (234,177) Point used for California link x- and y-coordinates (234,177) on status bar Chapter 5: Creating an Image Map

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

<table> tag align content at top vertically Creating a Table <table> tag align content at top vertically Chapter 5: Creating an Image Map

Inserting an Image to Use as an Image Map hspace attribute adds horizontal space around image usemap attribute tells browser what image map to use <img> tag with source, width, and height attributes Chapter 5: Creating an Image Map

Adding a Header and Text to a Table Cell Name of file for Southwest header Paragraphs of text Chapter 5: Creating an Image Map

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

Creating a Horizontal Menu Bar with Text Links Horizontal menu bar with text links to three Web pages that correspond to three hotspots on image map Chapter 5: Creating an Image Map

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

Creating an Image Map Chapter 5: Creating an Image Map name and id attributes correspond with map name used in <img> tag on line 16 Three <area> tags that map three states in southwest.jpg map X- and y- coordinates are pairs of numbers that correspond to points on the map polygons; 5 pairs for Arizona and Nevada 7 pairs for California all three hotspots are polygon shaped Chapter 5: Creating an Image Map

Validating, Viewing, and Printing a Web Page Paragraphs of text image map E-mail link Horizontal menu bar Chapter 5: Creating an Image Map

Creating a Second Web Page header image AZ flag image Horizontal menu bar with links to all other Web pages Image relevant to Arizona Two-column table of facts about AZ Chapter 5: Creating an Image Map 22 22

Adding a Heading HTML code shown in Table 5–9 Image of AZ flag for top, left side of Web page Image of AZ header for center, top of Web page Chapter 5: Creating an Image Map

Adding a Horizontal Menu Bar HTML code shown in Table 5–10, pressing the Horizontal menu bar same as that on home page; provides easy acces to all Web pages on Web site Chapter 5: Creating an Image Map

Adding Information and an Image HTML code shown in Table 5–11 Image of cactus on Arizona Web page Table of facts about state of Arizona Chapter 5: Creating an Image Map

Adding Information and an Image Image of cactus on Arizona Web page Table of facts about state of Arizona Chapter 5: Creating an Image Map

Adding Additional Information Remainder of AZ facts put in a table Chapter 5: Creating an Image Map

Validating, Viewing, and Printing the Web Page AZ header image Horizontal menu bar with links to all other Web pages Image of cactus Table of facts about Arizona Chapter 5: Creating an Image Map

Testing the Links California Web page Chapter 5: Creating an Image Map

Chapter Summary Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map and describe the steps to implement an image map Distinguish between appropriate and inappropriate images for mapping Sketch hotspots on an image Chapter 5: Creating an Image Map

Chapter Summary Describe how the x- and y-coordinates relate to vertical and horizontal alignment Open an image in Paint and use Paint to map the coordinates Create the home page and additional Web pages Create a table, insert an image into a table, and use the usemap attribute to define a map Chapter 5: Creating an Image Map

Chapter Summary Add text to a table cell and create a horizontal menu bar with text links Use the <map> </map> tags to start and end a map Use the <area> tag to indicate the shape, coordinates, and URL for a mapped area Change link colors Chapter 5: Creating an Image Map

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

Chapter 5 Complete Creating an Image Map