How to Make a CSS Map

In CSS, image maps allow Web designers to mark specific areas of an image as hot spots, or clickable areas. This technique can be useful in creating interactive maps, as well as other creative applications. The popularity of Flash has made image mapping somewhat less popular than it used to be, as has the standard of semantic HTML coding, since image maps aren't absolutely semantic. However, they still remain a valid CSS technique.

Things You'll Need

• Basic code editor such as Notepad++

Instructions

1. Add your image to the HTML page within a div. If an image is named "tree.jpg," for example, use the following code:

   <div id=pic>
   <img src="images/tree.jpg" width= "430" height="200" alt="Picture of sycamore tree" />
   </div>

   Of course, you would use the dimension and alt tag information that applies to your image.

2. Add an unordered list of links after the image. Each link should be identified by its own class. You can also give each link a title, so that when one hovers over a hot spot, the name will appear.

   <div id=pic>
   <img src="images/tree.jpg" width= "430" height="200" alt="Picture of sycamore tree" />

   <ul>
   <li class= "leaves">
   <a href="http://www.leaves.com" title="Leaves">
   Leaves
   </a>
   </li>
   <li class= "trunk">
   <a href="http://www.trunk.com" title="Trunk">
   Trunk
   </a>
   </li>
   <li class= "bark">
   <a href="http://www.bark.com" title="Bark">
   Bark
   </a>
   </li>
   </ul>
   </div>

3. Set the dimensions of the div in your style sheet so that it matches your image's dimensions. Then set the position property to relative. This is the key to the technique as it allows the links within the map to be absolutely positioned, as related to the div edges.

   #pic
   {width: 430px;
   height: 200px;
   position: relative;
   }

4. Remove the bullets from the unordered list by setting the style to none, and also remove the margin and padding for uniformity's sake.

   #pic ul
   {margin: 0;
   padding: 0;
   list-style: none;
   }

5. Set the width and height of the anchor link to create the desired "hit" area. Position them absolutely so that they will be moved to the top left corner of the div. From there you can position them to the correct area of the image. Create a high-numbered negative text indent to hide the link text.

   #pic a {
   position: absolute;
   width: 100px;
   height: 120px;
   text-indent: -1000em;
   }

6. Position the links to the relative parts of the image. You will have to tweak the numbers until you get them to where they need to be.

   #pic .leaves a { top: 50px;
   left: 150px;
   }

   #pic .trunk a {top: 150px;
   left: 150px;
   }

   #pic .bark a {top: 120px;
   left: 150px;
   }

7. Add a solid-line box in the color of your choice to create a rollover.

   #pic a:hover {
   border: 1px solid #000
   }

References

• "CSS Mastery;" Andy Budd; 2006

Resources

• AListApart.com: Night of the Image Map