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 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

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

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

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

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

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

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

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

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

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

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

Ending the Table Chapter 5: Creating an Image Map

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

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

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

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

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

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

Testing the Links Chapter 5: Creating an Image Map

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