| home / programming / image_map / 1 |    [previous][next] |
|
|
|
This additional style information will change the definition list so that it looks like a list of links:
Firstly and most importantly, make sure that you have the correct (X)HTML !DOCTYPE. Without this, most browsers will be thrown into 'quirks' mode which will lead to all sorts of incompatibility problems. W3C QA - List of valid DTDs has a list of valid DOCTYPES that can be used. Select from XHTML1.0 or XHTML1.1 as these are more suitable for this styling. I use XHTML1.1 for all my current web pages.
You will need to find or make a suitable main graphic for the Image Map. I have chosen a photograph of the Beatles that was available from the public domain. This image is 400px wide and 240px high.
The <body> is first to be styled with the font-family for the whole page. I have chosen Tahoma as the first choice but you can select any font you wish.
<dl id="imap"> is next. This needs to be styled as a block with width and height values at the same size as your main image. Your main image is then placed as a background image with no-repeat (so that we only get one) and finally a we give this a relative position so that we can place the four <dd>'s using absolute positioning.
/* set up the font to be used for the page */
body {
font-family: tahoma; arial, sans-serif;
}
/* set the size of the definition list <dl> and add the background image */
#imap {
display:block;
width:400px;
height:240px;
background:url(../images/beatles_basic.jpg) no-repeat;
position:relative;
}
You should see the main image with the text overlaid.
Now that we have the main image in place, we can set up the image that will indicate the active link areas. This image will be displayed when we hover over the main image.
In my example we will need four 'hotspots.' I have added these to the main image as shown below using an opaque area of 85pixels (px) square with a white border. For the sake of simplicity I have defined all the 'hotspots' as being the same size. These could also have been rectangles of varying sizes.
It doesn't matter if the areas intersect each other as this will be taken care of in the styling.
Since the main image is held as a background image in the <dl> tag we need to place the hover image as a background image in the next tag available which will accept the pseudo class :hover style. This will be the link <a id="title" href="#nogo" title="The Beatles">
As a result, we style this link as below:
/* set up the definition list <dt><a> to hold the background image for the hover state */
#imap a#title {
display:block;
width:400px;
height:0;
padding-top:240px;
overflow:hidden;
position:absolute;
left:0;
top:0;
background:transparent url(../images/beatles_hover.jpg) no-repeat 400px 400px;
cursor:default;
}
/* the hack for IE pre IE6 */
* html #imap a#title {
height:240px;
he\ight:0;
}
Again we style this as a block with the same size as the hover image, but this time we use a height of 0px, a top padding of 240px and overflow hidden to move the text associated with the link out of sight. The hover image is set up as the background image and is also moved out of sight by giving it a position larger than the image size. The background color is transparent because we need the main image to show through.
I have also added a hack for Internet Explorer pre IE6 which corrects the box model bug.
With this style added there is no noticeable change to the page but to view this, click on the link below:
Now that we have the main image for the hover state in place it is a simple matter to style this to show when the mouse is placed over the image.
/* the <dt><a> hover style to move the background image to position 0 0 */
#imap a#title:hover {
background-position: 0 0;
z-index:10;
}
This moves the background image back into view at position 0 0. The z-index is added to ensure that the four 'hotspots' are always positioned above the hover background image (they will have a z-index of 20).
The position of each 'hotspot' is next to be styled. This requires the use of a paint package (or a little trial and error), but the paint package method being easier. What we need to know is the x/y positions of the top left corners of each 'hotspot'.
This information is then used to style the four <dd>s as follows;
/* place the <dd>s in the correct absolute position */
#imap dd {
position:absolute;
padding:0;
margin:0;
}
#imap #picp {
left:36px;
top:46px;
z-index:20;
}
#imap #picr {
left:113px;
top:76px;
z-index:20;
}
#imap #picj {
left:192px;
top:50px;
z-index:20;
}
#imap #picg {
left:262px;
top:60px;
z-index:20;
}
We set up the position absolute in a common #imap dd style, then style each unique dd with a top and left position and a z-index of 20 to make sure that they are situated on top of the background image(s).
The next step is to style the links that have been placed in each <dd>.
/* style the <dd><a> links physical size and the background image for the hover */
#imap a#paul, #imap a#ringo, #imap a#john, #imap a#george {
display:block;
width:85px;
height:85px;
background:transparent url(../images/hover.gif) -100px -100px no-repeat;
text-decoration:none;
z-index:20;
}
Since all of my 'hotspots' are the same size, I can group the style together. If you have 'hotspots' of varying sizes then you will need to style each one separately.
Each link is styled as a block 85px square with a background image that will be used when hovering over the 'hotspot.' Normally, this image will not be displayed. The z-index is set at 20 to ensure that the links are always on top of the background image(s).
My link hover image is just a transparent gif with a white border, but you can use whatever you like.
The above image shows the hover image over a blue background.
There is no noticeable change in the appearance of the page because we have not yet defined the :hover style for each link.
| home / programming / image_map / 1 | [previous][next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 27, 2003
Revised: March 29, 2005
URL: http://webreference.com/programming/image_map/1
