css tab bar with *changing images* for tabs

[thedash]

hey guys! I'm trying to create something like the first example on http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm ...except i would like to use images for the tabs, and have it change to another image when a particular tab is selected. The image for each tab will be different, so i have to have somewhere in my css something for each particular link ID in the links shown below...i think... I'm not exactly sure how to go about doing this.




<ul id="tabs" class="tabs">
<a href="#" rel="myspace" id="myspace"><img src="myspace.jpg" border=0></a>
<a href="#" rel="facebook" id="facebook" class="selected"><img src="facebook.jpg" border=0></a>
<a href="#" rel="gmail" id="gmail"><img src="gmail.jpg" border=0></a>
</ul>

[bluewalrus]

Don't need the image tag. Just set the image height and width. I think this will do it...


#myspace {
background:url(myspace.jpg);
height:200px;
width:200px;
}
#myspace:hover {
background:url(myspace_mouseover.jpg);
}

[X96 Web Design]

I would recommend Bluewalrus's way, but if you really need the IMG tag, use this for each of your images:


<img src="normal.jpg" alt="" onmouseover="this.src='hover.jpg';" onmouseout="this.src='normal.jpg';" />

That way is very long and tedious, so I'd recommend the CSS...

// X \\

[thedash]

I think those ideas are really good, but they seem like they'll only change the image when the mouse hovers over it.... What I need it to do is only change to a new image when that tab is clicked on, and stay the new image until another tab is clicked on and then revert back to the old image. Will the CSS code you provided work that way?

I'm not at all married to using <img's > ... I don't mind using the CSS code to provide the images.

It just needs to work like a tab menu where a specific tab changes to a new image when its active, and then when its no longer active (when someone clicks on a new tab), it goes back to the old image.

[thedash]

for some reason when i do this, the images seem to layer on top of one another... when i change id="myspace" to class="myspace" they no longer layer...what's the deal with that?

[thedash]

nevermind i figured it out :=)

[bluewalrus]

ids = # are for one use per page
classes = . are for multiple use in a page