What is an Image Map? A CCS Image Map allows multiple clickable hotspots on a single image.

For this tutorial I am going to use an image of a map (you can use any image). When I hover over each continent, a square will appear. Clicking over each continent will take me to that continent’s website.
Tutorial Image
Although, this techniques mixes presentation with content, it is still valid for HTML.

Let’s begin:

STEP ONE:

Save any image for web and add it to your HTML page inside a named div:

STEP TWO:

After the image div let’s add a list of links to each continent. (Include the list inside the “image” div).
Each list is going to have a new class (to identify each continent), a title attribute for each link (to contain the continent’s name), and a “_blank” target (to open the link in a new window).

STEP THREE:

Let’s add the style for our “image” id. Open your CSS file, specify the style for the image using: #image.
In there we are going to set the width, height, and position of the div.
- The width and height (using pixels).
- The position property is going to be “relative”. It will allow the links to be positioned absolutely, in relation to the edges of the div.

STEP FOUR:

We don’t want the list bullets to show. So, let’s eliminate them by setting a new style for our unordered list <ul>, and adding a list-style property.

STEP FIVE:

Let’s add the style for our links and move them to the top-left corner by adding an absolutely position. Set the preferred hit area by setting the links widths and heights. Then, let’s hide the links by setting a negative text indent.

STEP SIX:

It’s time to position our links over the relevant continents. In order to do this, we are going to give a placement position (top and left) to the classes we applied before to each link.

STEP SEVEN:

To conclude, let’s apply a color border to the links to create a rollover effect.

Preview your project in your browser. Mouse over the image, you should see something similar to this:
Final Result

By using an unordered list you learned how to use the positioning technique to create a pure CSS image map and remote rollover.

Image provided by fotolia.

Download Source Files