You Try It - Image Maps

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Fancy Lists
      Forms
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
         Why Image Maps?
         Suitable Images
         Select Hot Spots
         The Code
         Examples
         You try it
Section 5 - Publishing
Section 6 - Extras
Appendices
You try it!
Idea: Use an image map on your site.

Here's How: Here is an image map of Mount Rushmore. Use a map of your own to achieve similar results. To view this page correctly, you must download the image rushmore.jpg.
<html>
<head>
<title> Click Rushmore </title>
</head>
<body>
<MAP NAME="rush">
<area shape="polygon" href="http://www.whitehouse.gov/history/presidents/gw1.html" coords="61,84 87,49 119,53 143,88 138,114 161,143 99,165 36,152 67,123 59,95" title="George Washington">
<area shape="Circle" href="http://www.whitehouse.gov/history/presidents/tj3.html" coords="178,116 39" title="Thomas Jefferson">
<area shape="polygon" href="http://www.whitehouse.gov/history/presidents/tr26.html" coords="217,120 248,118 262,139 265,167 257,192 231,192 206,162 209,121" title="The Other Guy">
<area shape="rect" href="http://www.whitehouse.gov/history/presidents/al16.html" coords="272,95 338,187" title="Abraham Lincoln">
</MAP>

<center>
<IMG USEMAP="#rush" SRC="rushmore.jpg" BORDER="0" alt="Not a president">
</center>
</body>
</html>


Now it's your turn. Try an image maps as a fun way to navigate.
Back Home Forward