Navigation

	Home Page
	Index
	All Pages

Quick Search
Advanced Search »

Contributor Links

	Create a new Page
	Administration
	File Management
	Login/Logout
	Your Profile

Other Wiki Sections

Software

Image Maps - HTML

Overview¶

An HTML image map is an image with multiple "hot spots". A classic use of an image map is a map of the United States, with each state being a hot spot. There are three key elements to an HTML image map.

Image	<img src="graphics-file" usemap="#map-name">	Specifies which image to display, and which <map> element to use
Map	<map name="map-name"><area ... </map>	Defines the collection of hot spots on the image, each specified by an <area> tag.
Areas	<area shape="shape-type" coords="nn,.." href="target">	Represent regions of the image that, when clicked, act as hyperlinks.

Example¶

<IMG SRC="solarsys.gif" WIDTH=504 HEIGHT=126 USEMAP="#SystemMap">
<MAP NAME="SystemMap">
    <AREA SHAPE="rect"
          COORDS="0,0,82,126"
          HREF="/workshop/graphics/sun.gif">
    <AREA SHAPE="circle"
          COORDS="90,58,3"
          HREF="/workshop/graphics/merglobe.gif">
    <AREA SHAPE="circle"
          COORDS="124,58,8"
          HREF="/workshop/graphics/venglobe.gif">
    <AREA SHAPE="circle"
          COORDS="162,58,10"
          HREF="/workshop/graphics/earglobe.gif">
    <AREA SHAPE="circle"
          COORDS="203,58,8"
          HREF="/workshop/graphics/marglobe.gif">
    <AREA SHAPE="poly"
          COORDS="221,34,238,37,257,32,278,44,284,60,281,75,288,91,267,87,253,89,237,81,229,64,228,54"
          HREF="/workshop/graphics/jupglobe.gif">
    <AREA SHAPE="poly"
          COORDS="288,19,316,39,330,37,348,47,351,66,349,74, 367,105,337,85,324,85,307,77,303,60,307,50"
          HREF="/workshop/graphics/satglobe.gif">
    <AREA SHAPE="poly"
          COORDS="405,39,408,50,411,57,410,71,404,78,393,80,383,86,381,75,376,69,376,56,380,48,393,44"
          HREF="/workshop/graphics/uraglobe.gif">
    <AREA SHAPE="poly"
          COORDS="445,38,434,49,431,53,427,62,430,72,435,77,445,92,456,77,463,72,463,62,462,53,455,47"
          HREF="/workshop/graphics/nepglobe.gif">
    <AREA SHAPE="circle"
          COORDS="479,66,3"
          HREF="/workshop/graphics/pluglobe.gif">
<MAP>