Image mapping in HTML

Speaker Notes

Slide #1:

This slide show illustrates mapping.

Slide 2:

Image mapping lets me set the coordinates in an image so that clicking on different parts of the image will send me to different points in the page.

The code is shown on the next page.

Slide 3:

This slide shows the code that generates the mapping. On the next slide, I will relate it to the image in Photo Editor.

Slide 4:

This slide shows an insert of the HTML code over the image in Photo Editor.

When determining coordinates, you take the top left and the bottom right corners of the portion of the image that you are using. This creates a rectangle. When the user clicks anywhere in the rectangle, the reference will be to the place Named in the HREF clause.

There are other shapes that can also be used to fit the graphical image that you are using. See an HTML reference for additional information.

Slide 5:

When doing these coordinates I did my best to include most of the image. I could do it exactly - I am building a rectangle with the coordinates. When you look at the page, you can see that the main part of each letter is indeed included in the coordinates and the user will most likely click on a part of the letter that sends them to the referenced area.

Slide 6:

Note that I used NAME to designate 5 areas within the code - I named them I,M,A,G,E to match the letters in the image. This was my choice, I could have named them anything. When the I is clicked it is within the coordinates 2,19 and 8,75 so the link is made to the area designated as NAME "I".