Be the first to write a review
Night of the Image Map
In this free tutorial, Stuart Robertson shows how to make an old-school image map for navigation, using CSS and XHTML:
"When the other designer sent me his concept for the site, I began to despair. He wanted the page to look like an old weathered book, with rough edges and grungy textures. The menu items were scattered about the page. How could I turn a well-structured document into something that looked so organic? I thought about image maps.
They were horribly outdated, but an image map would make things so much easier than chopping the background image into dozens of pieces and trying to use CSS to stitch it back together. It might have been crazy to think about using them again, but the old ways seemed to hold the answer. I decided to go back into the laboratory and see if I could .."
This article was originally published by A List Apart, and is reproduced by kind permission.
Night of the Image Map
In the old days, before we thought much about web standards or the importance of accessibility, web designers used image maps to quickly divide a single image into regions, and link those regions to separate URLs. Traditional image maps, though, don't work well with text-only browsers, and they aren't as efficient or versatile as many newer techniques. You might still find them in use on an old web page or perhaps some kind of complex map, but most web designers would consider it an old technique. A dead one.
While collaborating on a horror fiction web project, I decided early on that I'd do my best to code the site using only standards-based XHTML and CSS. When the other designer sent me his concept for the site, I began to despair. He wanted the page to look like an old weathered book, with rough edges and grungy textures. The menu items were scattered about the page. How could I turn a well-structured document into something that looked so organic?
I thought about image maps.
They were horribly outdated, but an image map would make things so much easier than chopping the background image into dozens of pieces and trying to use CSS to stitch it back together. It might have been crazy to think about using them again, but the old ways seemed to hold the answer. I decided to go back into the laboratory and see if I could use the modern science of CSS to bring this web design technique back to life...
These are the facts as we know them
To make our image map, we'll use CSS to create invisible links and float them over the background image wherever we need them to be.
First we create an outer div which will be used to apply the background image. Our links will go inside a nested div to keep our code organized and allow us to apply styles to the links as a group. The nested div can also come in handy when using a style sheet switcher to create alternate CSS menu effects.
<div id="book">
<div id="menu">
...
</div>
</div>
The individual links can now be placed inside our nested div. Giving each link its own id allows us to independently position them on the page. These separate ids also act as anchors, letting users select the links directly no matter where they are located on the page, or their ability to click on them.
To make the text within each link invisible, we need to add another nested tag. I prefer to use semantically meaningless <i> tags because they provide visual clues to their presence in the absence of a stylesheet, which makes them easier to work with. They're also very short, which helps with code efficiency. However, you could certainly use <span>, <em>, or some other tag if you'd like.
<div id="book">
<div id="menu">
<a href="index.html" id="home"><i>Home</i></a>
<a href="preface.html" id="preface"><i>Preface</i></a>
<a href="stories.html" id="stories"><i>Stories</i></a>
<a href="galleries.html" id="gallery"><i>Galleries
</i></a>
<a href="forums.html" id="forum"><i>Forum</i></a>
<a href="mementos.html" id="mementos"><i>Mementos
</i></a>
<a href="credits.html" id="credits"><i>Credits</i></a>
<a href="indicia.html" id="indicia"><i>Indicia</i></a>
</div>
</div>
This is the all the XHTML that we need. You can see the results in Example 1. We can now move on to creating the image map effect with our stylesheet.
Bruce Lawson
I'm the brand manager of glasshaus, a publishing company specialising in books for web professionals. We've a series for dreamweaver professionals - the dreamweaver pro series.