| home / programming / image_map / 1 |   [previous] |
|
|
|
All the previous examples show the definition list text above the images. This text should only be displayed when we hover over a 'hotspot.' We will style the <span> text as below to hide it from view.
/* style the span text so that it is not initially displayed */
#imap a span, #imap a:visited span {
display:none;
}
Now things are starting to take shape:
This is a simple matter of moving the link background image into view when we hover over each 'hotspot' and is achieved as below:
/* move the link background image to position 0 0 when hovered */
#imap a#paul:hover, #imap a#ringo:hover, #imap a#john:hover, #imap a#george:hover {
background-position:0 0;
}
As with the background hover, this is done by repositioning the background image at 0 0.
Now, when you hover the mouse over each 'hotspot' two things happen:
We now need to make the selected 'hotspot' text visible.
/* define the common styling for the span text */
#imap a:hover span {
position:absolute;
width:388px;
display:block;
font-family:arial;
font-size:12px;
background:#fff;
color:#000;
border:1px solid #000;
padding:5px;
}
/* the hack for IE pre IE6 */
* html #imap a:hover span {
width:400px; w\idth:388px;
}
In my example I have decided that the text should appear in a bordered block, the same width as our main image, with a white background. Of course, you can style this as you wish.
Again, I've added the hack for Internet Explorer pre IE6.
The first thing you will notice about the above example is that the text box is positioned with its top left corner in the same positon as the top left corner of the 'hotspot' selected.
Since I want the text block to appear in the same position below the main image I need to recalculate the top left position of each span relative to the top left position of each 'hotspot.'
Doing this produces the following unique styling for each span text.
/* move the span text to a common position at the bottom of the image map */
#imap a#paul:hover span {
left:-36px;
top:200px;
}
#imap a#ringo:hover span {
left:-113px; top:170px;
}
#imap a#john:hover span {
left:-193px;
top:196px;
}
#imap a#george:hover span {
left:-263px;
top:186px;
}
The above example should show that each text block now appears below the main image with the top left corner of each block having the same position. The blocks can vary in height as we have not fixed this value.
It's possible to further style the span text and I have chosen to do this using the following style, which you can modify as necessary.
/* add the style for the link span text - first line */
#imap a span:first-line {
font-weight:bold;
font-style:italic;
}
With this final piece of styling, which will display the first line of our text in bold italics, we end up with our completed Image Map.
This tutorial shows just one of the ways in which image maps may be styled using CSS. If you comply with the basic design principles you can restyle this in literally hundreds of ways. It's all up to your imagination and ingenuity, and your ability to use your favorite image painting software.
| home / programming / image_map / 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: March 29, 2005
URL: http://webreference.com/programming/image_map/1
