Day of the Image List

Published: 2006-03-21

Author: Fabian Wolf

This article describes how to combine a CSS-based image map with semantic-correct XHTML code and a better way of creating rollover buttons.

About four months ago, I wanted a new design for the website of my one-man-company, Fabian Wolf-Webdesign. My beloved one was in the process of creating a complete different logo and style of it, but I thought till she'd be finished with that task it'll take a good amount of time. Right now, the logo is finished but the lettering is still incomplete. By then, there wasnt even this, only sketches.

I took less than 10 minutes to think and plan how my new, temporary website should look like, but to achieve what I've planned took my at least 6 hours of concentrated work.

For the impatient: Take a look at the result of my work ;)

It doesnt look like something special, but it is. You just have to do this magic called 'read the code'. What you will see is not a plain image map but an unordered list, a lot of CSS code and NOT a standard rollover source code. Let's break the site down as I did:

Step #1: I wanted a rather basic-looking, non-blockwise graphic to be the center of navigation. Something simple, already seen hundreds of times back in the good ole days, when there were startup companies growing like muchrooms (in the late 90's of the 20th century). Some other site with a heavy load of flash in it, including a small fly fleeing your mouse cursor when you moved over it somewhat inspired the look.

Step #2:: So now we have the graphic. I didnt want to use techniques out of the Stone Age of the internet to create my image map, thus I relied on the help of the great Night of the Image Map-article found at A List Apart.

Step #3: I did it a bit different than Stuart Robertson, the author of above mentioned article. Instead of simply using anchor-tags without connections to each other I instead created an unordered list. Reason to do this: if you havent read the legendary Taming Lists-article, then please do so. I'll wait till you come back...

.. Ah .. back you are. Fine, let's go on with reading ;)

As you can see, I'm using em-tags instead of the in the article proposed i-tags:

<ul>   <li><a href="#"><em>News</em></a></li>   <li><a href="#"><em>Referenzen</em></a></li>   <li><a href="#"><em>Design</em></a></li>   <li><a href="#"><em>Webhosting</em></a></li>   <li><a href="#"><em>Übersetzung</em></a></li>   <li><a href="#"><em>Kontakt</em></a></li> </ul>

You've only got rectangular shapes within CSS, so after a while I had to split the list items to still achieve the wanted effect:

<ul id="navlist">   <li><a id="menu-news" href="http://f2w.de/news/" title="News"><em>News</em></a></li>   <li><a id="menu-refs1" href="http://f2w.de/referenzen/" title="Referenzen"><em>Refer</em></a><a id="menu-refs2" href="http://f2w.de/referenzen/" title="Referenzen"><em>enz</em></a><a id="menu-refs3" href="http://f2w.de/referenzen/" title="Referenzen"><em>en</em></a></li>     <li><a id="menu-design1" href="http://f2w.de/design/" title="Design"><em>Desig</em></a><a href="http://f2w.de/design/" id="menu-design2" title="Design"><em>n</em></a></li>   <li><a id="menu-hosting" href="http://f2w.de/webhosting/" title="Webhosting"><em>Webhosting</em></a></li>   <li><a id="menu-trans1" href="http://f2w.de/uebersetzung/" title="Übersetzung"><em>Über</em></a><a id="menu-trans2" href="http://f2w.de/uebersetzung/" title="Übersetzung"><em>set</em></a><a id="menu-trans3" href="http://f2w.de/uebersetzung/" title="Übersetzung"><em>z</em></a><a id="menu-trans4" href="http://f2w.de/uebersetzung/" title="Übersetzung"><em>ung</em></a></li>   <li><a id="menu-contact" href="http://f2w.de/kontakt/" title="Kontaktaufnahme"><em>Kontakt</em></a></li> </ul>

The title-elements shown in the code excerpt above were only an additional tweak because I always liked it with the old image maps that when you move over a hot spot you get a simple tooltip window with some info text. ;)

By now, we have the image map alive. The image map source code is included in the already mentioned website, so I'm not going to post it in here, also because it would be very lengthy.
I've tested the HTML file also for text-browsers although I dont have any installed using the text-mode simulation of Opera 8.

Step #4: I wanted them hot spots behave like rollover images. Some time ago I read a very interesting article about how to achieve this without actually having to a) create several new images and b) to not having to pre-load them. I didnt try out this method yet, but I was sure it would greatly enhance my image map.

First I had to get back to the sketch board, creating several states of the buttons being active. This method relies on the following idea: Instead of completely replacing each image with another, you simply move the image background. This saves a lot of time, because moving something is achieved quite faster than having to replace something in Javascript. So you create each single state of your rollover image in one big image file which normally doesnt take much longer to load (especially when using PNG as your prefered image format) than usual, but sometimes is even faster.

I did so, too, but using only one different state, the mouse-over one. Let's take a short look at the site - the background is moving - no image replacements done at all. Because I wanted to save size I split the graphic into two parts: the un-animated logo file and the background image with its different button states.

Step #5: I had some rather nasty difficulties to get all methods working together properly. Especially the moving of the background image didnt work properly in each browser, and everytime I thought I finally got the bugs out, one the browsers did show up some new shit again. Finally I came to the conclusion to use JavaScript to let the background being moved. I didnt want this from start on, but there was no choice. Else all my efforts would be wasted.

But JavaScript doesnt break anything, at least not in this case. If you come to the site with a browser without or disabled JavaScript abilities, you still can view the pages in all their glory. The CSS is still working. And if you're coming in with a text-mode browser or a screenreader, you'll be happy seeing/hearing nothing else than list entries. ;)

Step #6: The final site can be found at: http://f2w.de/article.php

As you may notice when clicking around a bit, there's no real content yet. Right now, I'm working on a different version, also only an interim state, which will feature much simpler methods but is going to work better for my purposes. ;)

I hope you had fun and gained something out of this article. I'm sorry if some of my english sounds kind of different to you, but it is not my native language. My mother tongue, as we say here, is German. ;)