Image Mapping: Creating Interactive Web Pages with Clickable Hotspots

1. Chapter 5 Creating anImage Map

2. 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 • 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 Chapter 5: Creating an Image Map

3. Chapter Objectives • 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 • 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

4. Image maps - examples • Turn to pg. 205 – we’ll start there looking at examples of image maps. • Hazard of using image maps – if images DON’T load, users can’t navigate the page. • To help remedy this, make sure you have text links to the same content. • Discuss some of the ways image maps are used • Just basically create hot spots in a image that are clickable. Chapter 5: Creating an Image Map

5. Server-side vs. client-side • Server-side image maps – displayed by the client in a browser but implemented by a program that runs on the server. Web server does all the work – processes the X,Y coordinates and relates it back to the client. • Client-side image maps – Browser does all the work. Faster response time! This is the preferred way. HTML code contains the X,Y coordinates and takes care of it all. *NOTE – Older browsers might not support client-side image mapping. Chapter 5: Creating an Image Map

6. Creating an image map • Pg. 211-212 – see how the images have the hot spots sketched out. • You have to determine the X,Y coordinates for each area you want to be clickable. • X-axis – horizontal • Y-axis – vertical • Look at the status bar in Paint to see the coordinates. Chapter 5: Creating an Image Map

7. Different shapes • Rectangle – top left and bottom right corners • Circle – Center point and the radius (you must calculate this based on the distance from the center point to the edge of the circle) • Polygon – Coordinates for each corner you wish to use • See pg. 214-215 for examples. Chapter 5: Creating an Image Map

8. Copy files from Public • Create a Ch. 5 directory in your home directory. • Go to P:\HTML Stuff\Chapter05\ChapterFiles and copy all of these to your home directory • Read the project on pg. 202. • Open southwest.jpg in PAINT. Chapter 5: Creating an Image Map

9. Opening an Image File in Paint Chapter 5: Creating an Image Map

10. Locating X- and Y- Coordinates of an Image • Do pg. 220-221 to locate the coordinates for this image. • We use Paint, but there are other image mapping tools such as: • Mapedit (Windows, UNIX, Mac OS) • CoffeeCup Image Mapper – Windows • Imaptool – Linux/X-Window • There are also tools you can use to create images that can be used for image mapping such as Adobe Photoshop! Chapter 5: Creating an Image Map

11. Starting Notepad and Entering Initial HTML Tags Make sure you use your template file – it has the correct DOCTYPE statement for validation! Then make it match this table (pg. 223) Chapter 5: Creating an Image Map

12. Creating a Table • DO pg. 225-229 – Creating a table • When you are finished, it will look like the next slide – pg. 229 Chapter 5: Creating an Image Map

13. Ending the Table Chapter 5: Creating an Image Map

14. Coding an image map • Look on pg. 230 to see the tags and attributes for image mapping. Chapter 5: Creating an Image Map

15. Creating an Image Map • Do pg. 231 • When finished, validate this and show it to me. • This finishes our first page, now we have to create the subsequent ‘Linked’ pages for our image. Chapter 5: Creating an Image Map

16. Validating, Viewing, and Printing a Web Page Chapter 5: Creating an Image Map

17. Copying and Pasting HTML Code to a New File • Do pages 237-242 to create the 2nd page of this process. • Validate this page… it should look like the following slide (pg. 245) • Show me. Chapter 5: Creating an Image Map

18. Validating, Viewing, and Printing the Web Page Chapter 5: Creating an Image Map

19. Testing the Links • Click the Home link on the Arizona Web page • Click the Nevada area on the image map on the home page • Click the California link on the Nevada Web page • Click the Home link on the California Web page • If any of the links do not work correctly, return to Notepad to modify the HTML code, save the changes, and then retest the links in the browser Chapter 5: Creating an Image Map

20. Testing the Links Chapter 5: Creating an Image Map

21. Finished…now What? • Homework – Due next class meeting • Got to scsite.com/html5e/learn and do the practice test. • You will get the grade you turn in. • Project: • In the Lab – Lab 3 • Pay attention to details and do EXACTLY what you are asked to do. • For state web sites, you can include convention/visitors bureau, parks, etc. in addition to the ones recommended. JUST PICK ONE TYPE! Chapter 5: Creating an Image Map