HTML and CSS Reference
In-Depth Information
<area shape=“circle” coords=“379,152, 21”
href=“/music/help.html”
alt=“Help” />
</map>
The
<img>
tag that refers to the map coordinates uses
usemap
, as follows:
<img src=“jukebox.gif” usemap=“#jukebox”>
Finally, put the whole thing together and test it. Here's a sample HTML file for The
Really Cool Music Page with a client-side imagemap, which contains both the
<map>
tag
and the image that uses it:
9
Input
▼
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/transitional.dtd”>
<html>
<head>
<title>
The Really Cool Music Page
</title>
</head>
<body>
<div align=“center”>
<h1>
The Really Cool Music Page
</h1>
<p>
Select the type of music you want to hear.
<br />
You'll go to a list of songs that you can select from.
</p>
<p>
<img src=“jukebox.gif” alt=“Juke Box” usemap=“#jukebox” />
<map name=“jukebox”>
<area shape=“rect” coords=“101,113, 165,134”
href=“/music/classics.html”
alt=“Classical Music and Composers” />
<area shape=“rect” coords=“101,139, 165,159”
href=“/music/country.html”
alt=“Country and Folk Music” />
<area shape=“rect” coords=“101,163, 165,183”
href=“/music/rockpop.html”
alt=“Rock and Pop from 50's On” />
<area shape=“poly” coords=“175,152, 203,118, 220,118, 247,152,
237,153, 237,181, 186,181, 186,153”
href=“code/music/home.html”
alt=“Home Page for Music Section” />
<area shape=“rect” coords=“259,113, 323,134”
href=“/music/swing.html”
alt=“Swing and Big Band Music” />
<area shape=“rect” coords=“259,139, 323,159”
href=“/music/jazz.html”
alt=“Jazz and Free Style” />
<area shape=“rect” coords=“259,163, 323,183”
