| home / programming / image_map / 1 |   [next] |
|
|
| ||||||||||||||||||||||
By Stu Nicholls.
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 definition 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.
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.
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.
| home / programming / image_map / 1 | [next] |
| ||||||||||||||||||||
Created: March 27, 2003
Revised: March 29, 2005
URL: http://webreference.com/programming/image_map/1
