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.
With this article I hope to show how you can turn an ordinary Definition List like this into an Image Map like this using nothing more than CSS, and what is more, it should work in all modern browser including Internet Explorer 5.5.
I will work through the styling a 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 thus allowing you to follow the principles more easily.
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.
Because there are four Beatles I will need to define four 'hotspots' but you can have as many as you like, the principle is the same.
In order that we can style this list we need to add information that will enable us to target specific elements.
I have added the following style information to the (x)html.
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 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.The results can be seen here:-
You should see the main image with the text overlayed.
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' and I have added these to the main image as shown below using an opaque area 85px square with a white border. For the sake of simplicity I have defined all the 'hotspots' as the same size. These could also have been rectangles of varying sizes.
It does not matter if the areas intersect each other as this will be taken care of in the styling.
Because 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">
So we style this link as below:
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.
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).
You will see from the above example that we now have a change of image when hovered and also the title 'The Beatles' is also displayed next to the mouse.
The position of each 'hotspot' is next to be styled. This requires the use of a paint package (or a little trial and error) 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;
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>.
Because all 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
All the previous examples show the definition list text above the images. However, 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.
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:
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.
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. You can of course style this as you like.
I have again 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 it's top left corner in the same positon as the top left corner of the 'hotspot' selected.
Because 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.
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 is possible to further style the span text and I have chosen to do this using the following style. You can obviously style this as you wish.
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 just CSS. As long as you stick to the basic principles you can restyle this in literally hundreds of different ways. It is all down to you imagination and ingenuity, and of course your ability to use your favorite 'paint' software.