HyperText Markup Language
What's New in 3.2?

Image Maps

Basic Components of an Image Map

1. An IMAGE (GIF or JPEG) -- loaded on the server, then displayed on a Web page using the <IMG> tag
2. COORDINATES -- defining selectable areas (shapes) of the image
3. URLs -- corresponding to each selectable area (defined by coordinates) or the image
4. ISMAP attrbute (server-side image maps)
   • Map file containing coordinates and URLs
   • Server-based map software for processing the map information
   • Anchor tag, <A HREF=...>, surrounding the <IMG> tag for the image map
5. USEMAP="map-name" attribute (client-side image maps)
   • Named <MAP> ... </MAP> container within HTML file
   • <AREA> tags for each selectable area of the image containing coordinates, shape information, URLs, etc.

How Server-side Image Maps Work

• The <IMG> tag includes the ISMAP attribute
• A map file is created containing the x y coordinates for selectable areas of the image

  Example:

  rect http://thomas.loc.gov/home/thomas.html 5,0 59,69
  rect http://thomas.loc.gov/bss/d105/hot-subj.html 6,69 126,124
  rect http://thomas.loc.gov/bss/d105/hot-titl.html 128,69 244,95
  rect http://thomas.loc.gov/bss/d105/hot-bill.html 244,70 363,96
  rect http://thomas.loc.gov/cgi-bin/bdquery/L?d105:./list/bd/d105hl.lst:1 (Major_Bills_Enacted_Into_Law_This_Congress){HBPLATE/majleg105} {FBPLATE/footer.HTML} 362,71 481,126

• A hypertext anchor tag, <A HREF=...>, surrounds the <IMG> tag pointing to the CGI program for image maps and the URL for the Map file

  Example:

  <A HREF="http://thomas.loc.gov/cgi-bin/imagemap/images/maj105a.map">
  <IMG SRC="http://thomas.loc.gov/images/maj105a.gif" ISMAP BORDER="0" WIDTH=477 HEIGHT=123 ALT="[Major Legislation by Topic]"></a>

  Displays as:

  

How Client-side Image Maps Work

• Map information is stored within the HTML file (using the <MAP> and <AREA> tags)
• USEMAP= attribute points to the named MAP information in the HTML file

  Example:

  <IMG SRC="http://www.loc.gov/loc/webstyle/buttons3.gif"
  ALT="Button Bar of Options" HEIGHT=25 WIDTH=570 BORDER=0
  USEMAP="#buttons3-map">
  <MAP NAME="buttons3-map">
  <AREA SHAPE=rect COORDS="0,0,151,25" HREF="http://www.loc.gov/loc/webstyle/ack.html" ALT="Acknowledgements">
  <AREA SHAPE=rect COORDS="151,0,241,25" HREF="http://www.loc.gov/loc/webstyle/toc.html" ALT="Table of Contents">
  <AREA SHAPE=rect COORDS="241,0,350,25" HREF="http://www.loc.gov/loc/webstyle/mandatory.html" ALT="Mandatory Items Checklist">
  <AREA SHAPE=rect COORDS="350,0,461,25" HREF="http://www.loc.gov/loc/webstyle/temphome.html" ALT="Templates">
  <AREA SHAPE=rect COORDS="461,0,569,25" HREF="http://www.loc.gov/loc/webstyle/bib.html" ALT="References">
  </MAP>

  Displays as:

  

Combination of Server-side and Client-side

• Not all browsers support "client-side" image mapping
• Add MAP file and ISMAP attribute to client-side coding as a fall-back

  Example:

  <A HREF="http://www.loc.gov/cgi-bin/imagemap/loc/webstyle/buttons3.map"> <IMG SRC="http://www.loc.gov/loc/webstyle/buttons3.gif" alt="Button Bar of Options" height=25 width=570 border=0 ISMAP USEMAP="#buttons3-map"></A>
  <MAP NAME="buttons3-map">
  <AREA shape=rect coords="0,0,151,25" href="ack.html" alt="Acknowledgements">
  <AREA shape=rect coords="151,0,241,25" href="toc.html" alt="Table of Contents">
  <AREA shape=rect coords="241,0,350,25" href="mandatory.html" alt="Mandatory Items Checklist">
  <AREA shape=rect coords="350,0,461,25" href="temphome.html" alt="Templates">
  <AREA shape=rect coords="461,0,569,25" href="bib.html" alt="References">
  </MAP>
  

Go to:

• HTML: What's New in 3.2?
• Library of Congress Home Page