Topic: Simple(r) CSS Image Switcher

A month ago, on November 5th, CSS Beauty linked to an article called Simple CSS Image Switcher, which demonstrated a way to switch the header image as you rolled over each navigational link below it. Since I was looking for a solution to a problem I had with re-coding my church's website, this looked like my answer. ...Well, it was until I looked at the source code. No offense to Andy, but I didn't agree with his use of nested unordered lists for every single 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 even though it didn't completely work yet. My solution to switching the header image as you rolled over each navigational link below it worked in almost every browser I could test in except for Mozilla 1.7.12. In Mozilla, an ugly black line showed up that stretched from the horizontally centered 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 ran across an article from Veerle this weekend and saw what looked like a solution to my problem. I had previously been using "margin-left:-10000px;" to hide text. After reading the article, I'm now using "position:absolute; top:-10000px;" and it completely 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:

<ul>
				<li><a class="about" href="#"><span>About</span><img src="images/banner_about.jpg" alt="About" width="760" height="149" /></a></li>
</ul>

Does that seem to make more sense than nested unordered lists? If it does, and you'd be willing to test out my solution in other browsers other than the ones I can test on a PC (IE6, Firefox, Mozilla, Opera), please visit the page I've set up for testing. NOTE: The graphics on the page are not mine, but the guy who designed the church's website, so please don't respond about how hefty the graphics may be. Also, I realize there's a little bit of jumping around within the grapics themselves because the text in the graphics don't line up correctly. There's nothing I can do since these were the graphics I was given.

My original goal was to take my church's website from THIS to the test page I've created. Disregarding the fact that the guy used images instead of actual text for the entire site, take a look at the source code on the church's website to see how the switching header image was accomplished. Messy... Since I was re-coding the site for them, I wanted a CSS solution and the test page is what I came up with.

I owe some thanks to Dave Shea's article on A List Apart called CSS Sprites: Image Slicing’s Kiss of Death and of course to Veerle for that bit of code that turned out to be genious.

Re: Simple(r) CSS Image Switcher

Wow ray, that does look like it makes more sense and simpler too.

Exercise your faith!