Image Maps

• An image map enables a single image to have multiple hyperlinks.

• Different areas within the image can be associated with distinct URLs. Example:
  

• This uses a client-side image map:
  • The USEMAP attribute in the IMG tag

  • The MAP tag

  • The AREA tags

  • The SHAPE, HREF, and COORDS attributes

  • How to get the coordinates

• More examples:
  • A photo of a group of people
    • Clicking on one takes you to that person's home page

  • A geographic map
    • Clicking on a district or a city or a state or a country takes you to a web page that describes it

  • A picture of a collection of items that are for sale
    • Clicking on one takes you to the item's description and price

• Early sites used server-side image maps

Lab Find or create an image suitable for mapping and add it to your page. Create the map that associates the areas of the image with the URLs of the corresponding web pages. Find or create the corresponding web pages. Try it out!

---

Course Contents

http://www.keller.com/html2/7/index.html
Updated Wednesday, 31-Oct-2001 14:18:52 CST

Copyright © 2001

Dan Keller Technical Services 4500 19th St., San Francisco California, USA 94114 tel: 415 / 861-4500