Create a CSS Alternative to an Image Map

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...Loading...

Instead of a traditional image map that relies on <map> and <area> tags, you can create a styled alternative using a background image and positioned block anchors (hyperlinks). Download the demonstration file to view the HTML and CSS.

Writing the HTML for a CSS Image Map

<div id="cssimagemap">
	<figcaption>
        Photo provided by Michael (aka moik) / ex_magician on Flickr
        </figcaption>
	<a href="http://www.yahoo.com/" id="hiker1"></a>
	<a href="http://www.bing.com/" id="hiker2"></a>
	<a href="http://www.google.com/" id="hiker3"></a>
</div>

The HTML is not complicated. You can insert your image as a background image in different containers. My example uses a div, but a figure element would also be appropriate. It is important that your anchor/hyperlinks be within the container and each anchor needs unique identification for sizing and positioning.

Writing the Styles for a CSS Image Map

#cssimagemap {
	background-image: url(images/photos/hikers.jpg);
	width: 640px;
	height: 631px;
	position: relative;
	}

#cssimagemap a {
	display: block;
	border: 5px solid #333;
	position: absolute;
	}

#cssimagemap a:hover {
	border: 5px solid #FF2;
	}

a#hiker1 { width: 150px; height: 400px; left: 220px; top: 100px; }
a#hiker2 { width: 60px; height: 170px; left: 400px; top: 100px; }
a#hiker3 { width: 50px; height: 150px; left: 510px; top: 150px }

There are a few key steps to the CSS that allow this technique to work…

  1. The parent that has the background image is sized with the same dimensions of the image and has position set to relative.
  2. The anchors inside of the parent are set to display block so that they can be sized appropriately and they have position set to absolute.
  3. Each anchor inside of the parent needs precise width and height and positioning to best represent the clickable region for the user.

Add Comment