1. Chapter 5
Creating an Image 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 – 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 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 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 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