Simple(r) CSS Image Switcher

5 comments | Posted: 26 December 05 in Tutorials, by Ray Williams

Back in November, Andy Rutledge authored the Simple CSS Image Switcher, which demonstrated a way to switch the header image as you rolled over each navigational link below it. Around that time I was looking for a solution to a problem I had with re-coding my church’s website. I was trying to create a CSS only technique for switching the masthead image as you rolled over each link, and Andy’s technique looked like my answer. I looked at the source code but didn’t agree with his use of nested lists for every link.

Here’s one list item from his source code:

<ul>
<li id="blue">
<a href="#" title="blue">blue</a>
<ul>
<li>
<img src="blue.gif" alt="Blue" />
</li>
</ul>
</li>
</ul>

Seeing that, I gave up on that solution, even though it would have worked. I went back to the solution I was working on since mine seemed to make a little more sense, although it didn’t completely work yet. My solution to switching the masthead image as you rolled over each menu link below it worked in almost every browser I could test in except for Mozilla 1.7.12.

In Mozilla, an ugly 1px black line showed up that stretched from the menu all the way over to the left edge of the browser window, presumably over to the text I had hidden off the left side of the screen. I later ran across an article from Veerle and saw what looked like a solution to my black line problem.

I had previously been using margin-left:-10000px; to hide text. After reading the article, I’m now using position:absolute; top:-5000px; and it solves the problem of the black line extending to the left edge of the browser window in Mozilla.

Here’s one list item from my source code (image links version):

<ul>
<li>
<a class="leaves" href="#a">
<span>Leaves</span>
<img src="images/leaves.jpg" alt="Leaves" />
</a>
</li>
</ul>

It seems to make more sense than nested unordered lists. I used the technique from Dave Shea’s article on A List Apart called CSS Sprites: Image Slicing’s Kiss of Death for the version using images for links. There’s plenty of comments in the source code to help explain things, and to help you use this technique yourself. Here are the links to both versions I’ve created:

Discuss This Topic

  1. 1 Nathan Smith

    Looks like a great technique! I’ll have to delve into it a bit more when I have time. One suggestion right off the bat: I would take the height and width attributes out of the img tag, and simply use CSS to control that, or just let the images load into place with their original dimensions. Otherwise, great tutorial!

     

  2. 2 schnuck

    nice one – will definitely use it in my next project! thanks!

     

  3. 3 Yannick

    Very nice Ray! It does look Simple( r ) hehe. You said it worked in everybrowser you could test it in. I was wondering which browsers you tested it in?

     

  4. 4 Ray

    Yannick, I tested in all PC browsers I could think of, and had a friend test in Mac browsers as well.

     

  5. 5 Yannick

    Awesome! That’s Great!

     

Comments closed after 2 weeks.