CSE 154 Special Sections

Extra Session: HTML image maps

Original slides by TA Tanner Means

Image Map

  1. The Basics
  2. Required Elements
  3. Sample Code
  4. An Example
  5. Other Possibilities

The Basics

Image Mapping allows you to define clickable areas in an image.

da map

Image credit: Webaid, NC state gov

Required Elements: <img> and <map>

Add the usemap attribute to the <img> you want to map.

usemap's value should be:
"#" + the map's name attribute attribute of the <map> element. 


<img src="URL" id="id" usemap="#MapName" alt="text">

The <map> tag only has the name attribute. 


<map name="MapName">
	area tags (next slide)
</map>

Required Elements: <area>

Every area tag corresponds to a clickable area in the image 

					
<area shape="rect" coords="0,0,82,126" href="http://www.wikipedia.org" alt="Wiki" />
Attribute Value Description
shape default
rect
circle
poly 		Specifies the shape of an area
coords coordinates Specifies the coordinates of an area
href URL Specifies the hyperlink target for the area

Sample Code

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
	<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
	<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
	<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

Values for the shape and coords attribute:

Value Description Coordinate attribute value
default Specifies the entire region ""
rect Defines a rectangular region "x1,y1,x2,y2"
circle Defines a circular region "x,y,radius"
poly Defines a polygonal region "x1,y1,x2,y2,..,xn,yn"

An Example

Let's map Obama's facial features to pertinent websites

Link to starter code

Other Possibilities

So what could we do with this?

Here's what Tanner thought of