HTMLConcepts and Techniques

Fifth Edition

Chapter 5

Creating anImage Map

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

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 4

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 5

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 6

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 7

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 8

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!

Starting Notepad and Entering Initial HTML Tags

Chapter 5: Creating an Image Map 11

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

Ending the Table

Chapter 5: Creating an Image Map 13

Coding an image map

• Look on pg. 230 to see the tags and attributes for image mapping.

Chapter 5: Creating an Image Map 14

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 15

Validating, Viewing, and Printing a Web Page

Chapter 5: Creating an Image Map 16

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 17

Validating, Viewing, and Printing the Web Page

Chapter 5: Creating an Image Map 18

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

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 21