Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: CSS Rollover???

  1. #1
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Default CSS Rollover???

    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.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Unhappy Intercrap Explorer

    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.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

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

    (bangs head on desk a few times)
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Smile Thanks...(BUT)

    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!!!
    Last edited by TheJoshMan; 02-26-2006 at 10:56 AM.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 129 Times in 116 Posts

    Talking Thanks Again!

    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

  10. #10
    Join Date
    Jul 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you so much !

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •