PDA

View Full Version : 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
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!


<!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? :p

(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 ("http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=49519011" )


*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 (http://profile.myspace.com/index.cfm?fuseaction=user.viewprofile&friendid=49519011):D

HBKitty
07-31-2007, 06:25 PM
Wow... MySpace code that works. It's so beautiful. It brings tears to my eyes. I've been looking for this for weeks.

Thank you so much jscheuer1. :)

jgeorgie33
07-31-2007, 09:23 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.

Will all sorts of mobile devices, this doesn't seem like it will ever possible. There has to be several different types of browsers. Or at the very least, different versions of the same.

--
John George
Home Loan Information (http://www.gmacmortgage.com/)

Twey
07-31-2007, 09:37 PM
Plus, if there were only one browser it would kill innovation.

No, what we need is for browsers to actually follow the standards. On top of that, proprietary features are a good thing; but the standards have to be followed first. Innovation is no good if it breaks things.