CSS Rollover???

**TheJoshMan** · 02-22-2006, 10:12 PM

Ok, I may sound completely STUPID for asking this... but I'm wondering if it is possible to do an image rollover with CSS only... I've tried everything I can think of and I can't get it to work. The only thing that seems to work is the regular

HTML Code:

OnMouseOver="this.src='image1.gif'" OnMouseOut="this.src='image2.gif'"

I've tried a couple ideas I had like maybe setting the image as the background for a sized <div> class then specifying a "hover" state of that div but I can't seem to make that one work either... I don't know... Am I just pissin in the wind here or is this possible to do? Thanks for any help.

**Twey** · 02-23-2006, 04:12 PM

Alas, no. Your idea of the image background is an excellent one, and it would work - but for a bug in IE whereby it won't use :hover pseudo-classes except for a elements. And, of course, as the most widely-used web browser, we can't just ignore it. Now you begin to see why I hate it so much

**TheJoshMan** · 02-23-2006, 09:17 PM

Yes, I too use intercrap explorer... but not because I WANT to. Simply because it is not my computer to make changes to. I really wish every single one of these browser companies could just get together come up with all the ideas they want to put into thier own browsers and make ONE browser that would be the ONLY browser so NOBODY would have to worry about coding a page for cross-browser compatibility. BUT, I am not stupid enough to think that will happen in my lifetime.

**Twey** · 02-24-2006, 04:41 PM

I really wish every single one of these browser companies could just get together come up with all the ideas they want to put into thier own browsers and make ONE browser that would be the ONLY browser so NOBODY would have to worry about coding a page for cross-browser compatibility.

Well, that's the (general) idea of the W3C standards; however, Microsoft (who had a say in the standards) don't seem to be interested in following them. I guess it would mean less people would use their browser. It would be better for the Web in general, but who cares about that? Microsoft would lose money.

**jscheuer1** · 02-25-2006, 05:58 PM

Don't hate, create!

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>IE6 xbrowser CSS Rollover - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.roll {
background:url('photo3.jpg') center no-repeat;
cursor:text;
display:block;
width:140px;
height:225px;
}
.roll:hover {
background:url('photo9.jpg') center no-repeat;
}

</style>
</head>
<body>
<a href="javascript:void(0);" class="roll"></a>
</body>
</html>

**Twey** · 02-25-2006, 06:41 PM

... block-display as.
Permission to feel like an idiot?

(bangs head on desk a few times)

**TheJoshMan** · 02-26-2006, 10:45 AM

Hey,

That works great... But there's a problem. I was trying to do this for a "MySpace" page that is why I was hoping it could be done with strictly CSS. I guess I should have mentioned that in my previous post. Thanks for the help though. I will definately use that code in other pages that I do. (Just not MySpace)
Here is a link to the page on MySpace that I've been working with trying to completely reformat thier stupid way of displaying your profile. It was originally an attempt to do a rollover on my friends pictures because I created some "Charicature"? pictures of them that I wanted to display when rolled over.

El Stupido MySpacio

*Later Edit*
Well, I suppose I should probably have actually TRIED that out before posting what I did... I just saw the word "Javascript" and automatically told myself it wouldn't work! Sorry, It works great! I just took out the "javascript:void(0);" So now all I have to do is create a seperate class for each different friends picture that I want the rollover effect on. Thanks again! And sorry for bein such a Noo-B!!!

**jscheuer1** · 02-26-2006, 11:21 AM

Well, you need something for the href. If you leave it blank and someone clicks on it, it will try to display either the directory listing for that folder or that folder's default page (if it has one). If no javascript is allowed, not even javascript:void(0); which, in essence, is no javascript, perhaps href="#" will do. It will cause the page to reload if clicked.

**TheJoshMan** · 02-26-2006, 07:50 PM

Ok,

Got it done... Thanks again jscheuer1 and Twey... You guys both have helped me out quite a bit on these forums. And... Once again, have yet to let me down! Here's the link if you'd like to see the finished product.

MySpace