How to Create an Image Map Using CSS

Advertisements

Introduction

An image map is a way of defining multiple clickable link areas (hotspots) within one image. These 'hotspots' can then used for navigation or to display information about the image they cover.

In this article you will learn how to turn an ordinary defination list into an image map using nothing more than CSS, and what's more, it should work in all modern browsers, including Internet Explorer 5.5.

Here, you will learn one styling step at a time, fully explaining the reason for each style and showing the results of each step, so that you can see what to expect and implement it for yourself.

Method

The following steps will describe how to add images to the definition list and style the text so that it only shows when specific areas of the main image are selected.

Step 1

My example Definition List starts out as a list of Beatles names (they come from my era so it seems a suitable choice), their instruments and a piece of trivia information. The (x)html is written as follows.

<dl>
 <dt>
  The Beatles
 </dt>
 <dd>
  Paul McCartney - Bass Guitar and Vocals
  <br />
  <br />
  Paul McCartney's song, Yesterday, recently 
  voted the most popular song of the century 
  by a BBC poll, was initially composed without 
  lyrics. Paul used the working title 'scrambled eggs' 
  before coming up with the final words.
 </dd>
 <dd>
  Ringo Starr - Drums
  <br />
  <br />
  Dear Prudence was written by John and Paul 
  about Mia Farrow's sister, Prudence, when 
  she wouldn't come out and play with Mia and 
  the Beatles at a religious retreat in India.
 </dd>
 <dd>
  John Lennon - Guitar and Vocals
  <br />
  <br />
  In 1962, The Beatles won the Mersyside Newspaper's 
  biggest band in Liverpool contest principally 
  because they called in posing as different people 
  and voted for themselves numerous times.
 </dd>
 <dd>
  George Harrison - Lead Guitar and Vocals
  <br />
  <br />
  The Beatles' last public concert was held in 
  San Francisco's Candlestick Park on August 29, 1966.
 </dd>
</dl>

Because there are four Beatles I will need to define four 'hotspots,' but you can have as many as you like since the technique is the same.

In order that to style this list we need to add information that will enable us to target specific elements.

<dl id="imap">
 <dt>
  <a id="title" href="#nogo" title="The Beatles">
   The Beatles
  </a>
 </dt>
 <dd id="picp">
  <a id="paul" title="Paul McCartney" href="#nogo">
   <span>
    Paul McCartney - Bass Guitar and Vocals
    <br />
    <br />
    Paul McCartney's song, Yesterday, recently 
    voted the most popular song of the century 
    by a BBC poll, was initially composed without 
    lyrics. Paul used the working title 'scrambled eggs' 
    before coming up with the final words.
   </span>
  </a>
 </dd>
 <dd id="picr">
  <a id="ringo" title="Ringo Starr" href="#nogo">
   <span>
    Ringo Starr - Drums
    <br />
    <br />
    Dear Prudence was written by John and Paul
    about Mia Farrow's sister, Prudence, when 
    she wouldn't come out and play with Mia and 
    the Beatles at a religious retreat in India.
   </span>
  </a>
 </dd>
 <dd id="picj">
  <a id="john" title="John Lennon" href="#nogo">
   <span>
    John Lennon - Guitar and Vocals
    <br />
    <br />
    In 1962, The Beatles won the Mersyside Newspaper's 
    biggest band in Liverpool contest principally 
    because they called in posing as different people 
    and voted for themselves numerous times.
   </span>
  </a>
 </dd>
 <dd id="picg">
  <a id="george" title="George Harrison" href="#nogo">
   <span>
    George Harrison - Lead Guitar and Vocals
    <br />
    <br />
    The Beatles' last public concert was held in 
    San Francisco's Candlestick Park on August 29, 1966.
   </span>
  </a>
 </dd>
</dl>

I have added the following style information to the (x)html.

1. id="imap" - to the dl tag so that we can define it's size to hold the main image.
2. <a id="title" href="#nogo" title="The Beatles"> ... </a> - Because Internet Explorer will only accept the :hover pseudo class on links, we need to surround the dt text with this link and give it an id="title". I have used href="#nogo" instead of the usual href="#" so that anyone clicking the link will not jump to the top of the page (just make sure you do not have an anchor #nogo on your page). The title="The Beatles" has been added so that it will appear when the mouse is hovered over the main image.
3. Each dd has been given a unique id so that we can style each one.
4. Each dd text has been surrounded by a link for the same reason as with (2) above. These links have a unique id so that they can be individually targeted and a title as with (2) above.
5. Each dd text has also been enclosed in a span so that we can manipulate the text separately from the link.