Site Links

CSS Image Map Tutorial

This tutorial will show you how to create a image map using CSS.

An image map is a picture with several defined areas (hot spots) that can be used to display information when you roll over the indicated part of the picture (hot spot) or as a link navigation.

In this tutorial this is the picture I will be working with:

1. Step One: First create a definition list with a <dd> tag for each picture. I have 4 pictures in my image so I will create 4 <dd> tags because there are 4 people in my picture.

   <dl>
   <dt>Zions Family</dt>
   <dd>
   </dd>
   <dd>
   </dd>
   <dd>
   </dd>
   <dd>
   </dd>
   </dl>

2. Step Two: Now you will need to add some attributes (styling) to your list to be able to define your image map 'hot spots'.

   First we will give the entire list a name:

   <dl id="map">

   Next give each list tag (<dd>) an id also:

   <dd id="pic name">

   Now add a link tag (<a href="">) to each <dd> tag for each image. Replace URL with the url of the page you want the picture to link to

   <a id="LINK ID" title="LINK TITLE" href="URL>
   
   The full HTML:
   <dl id="map">
   <dt>Zions Family</dt>
   <dd id="pic1">
   <a id="chen" title="Chen" href="URL">
   </a>
   </dd>
   <dd id="pic2">
   <a id="zion" title="Zion" href="URL">
   </a>
   </dd>
   <dd id="pic3">
   <a id="miyoko" title="Miyoko" href="URL">
   </a>
   </dd>
   <dd id="pic4">
   <a id="elijah" title="Elijah" href="URL">
   </a>
   </dd>
   </dl>

3. Step Three: Now we will begin to create the CSS for the image map. The first thing you need to do is give the selector map (<dl id="map">) a height and width that matches the exact height and width of the image you are using in your CSS file.

   Next add your image file and give the #map selector the following properties:

   background-repeat: no-repeat;
   height: 300px;
   width: 400px;
   position: relative;
   display: block;
   
   The CSS:
   #map {
   background: url(IMAGEURLHERE);
   background-repeat: no-repeat;
   height: 300px;
   width: 400px;
   position: relative;
   display: block;
   }
   
   Replace IMAGEURLHERE with you image's url and replace 400 with the width of your image and 300 with the height of your image in pixels.

4. Step Three: Now you need to give the map title's hover property and the map <dd> id some CSS styling:

   #map a#title:hover {
   background-position: 0 0;
   z-index: 10;
   }

   #map dd {
   position: absolute;
   padding: 0;
   margin: 0;
   }

5. Step Four: Next you need to set up the 'hot spot' coordinates. To do this open your image in Paint Shop Pro. Roll your mouse over each picture you want to define as a link and look in the bottom left corner and you will see two numbers something like this: (243, 90). Click Here for a picture explanation. The coordinates will be outlined in red.

   You will now put the first number for left and the second for top. So if the coordinates are (15, 124) then the css will be:

   left: 15px;
   top: 124px;

   You will now add the following css renaming pic1, pic2, pic3 and pic4 with the names of your defined <dd>'s. Remember to replace left and top with the correct coordinates.

   #map #pic1 {
   left: 176px;
   top: 98px;
   z-index: 20;
   }

   #map #pic2 {
   left: 156px;
   top: 115px;
   z-index: 20;
   }

   #map #pic3 {
   left: 100px;
   top: 262px;
   z-index: 20;
   }

   #map #pic4 {
   left: 184px;
   top: 233px;
   z-index: 20;
   }

6. Step Five: The last thing you need to do is give the 'hot spot' area an actual size. We will create a small square with a pixel height and width of 30 for each 'hot spot' area. To do this you will need to style each link id with CSS:

   #map a#chen, #map a#zion, #map a#miyoko, #map a#elijah {
   display: block;
   width: 30px;
   height: 30px;
   text-decoration: none;
   z-index: 20;
   }

   Here's the full CSS for the image map:

   #map {
   background: url(IMAGEURLHERE);
   background-repeat: no-repeat;
   height: 300px;
   width: 400px;
   position: relative;
   display: block;
   }

   #map a#title:hover {
   background-position: 0 0;
   z-index: 10;
   }

   #map dd {
   position: absolute;
   padding: 0;
   margin: 0;
   }

   #map #pic1 {
   left: 176px;
   top: 98px;
   z-index: 20;
   }

   #map #pic2 {
   left: 156px;
   top: 115px;
   z-index: 20;
   }

   #map #pic3 {
   left: 100px;
   top: 262px;
   z-index: 20;
   }

   #map #pic4 {
   left: 184px;
   top: 233px;
   z-index: 20;
   }

   #map a#chen, #map a#zion, #map a#miyoko, #map a#elijah {
   display: block;
   width: 30px;
   height: 30px;
   text-decoration: none;
   z-index: 20;
   }

Zions Family

Page Last Updated: January 04, 2008, 7:36 AM