Today I needed to build a menu consisting of images for a new website we are launching in a couple of days. I wanted to use a simple list with the links and use the background property for each li element to show the images. The text in the link-images were rotated and that caused a problem, I had to hide the default link text when the style sheet was loaded and display the text when the style sheet was unavailable (if you for example are having visual problems or use a PDA).
If this sounds like something you need, read the following:
- Stuart Langridge describes how a background image can ”override” the default text in an element
- SimpleBits describes how these two techniques can be combined
Update (060731): I have found one problem with this solution. If you surf the site with CSS enabled, but images disabled you are not going to see the menu. I have not yet any solution to this, but I’ll update this post once I have found a solution.