1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Having an image black and white to full color via rolloever with CSS, possible?

Discussion in 'CSS' started by MediaHustler, Mar 26, 2007.

Thread Status:
Not open for further replies.
  1. #1
    Hello as you can see with my header on my site there are image rollovers from black and white to full color.

    http://www.YayFreeGames.com

    I was wondering with CSS can I acheive this same rollover effect, from black and white to full color without using the messy image rollovers javascripts.

    Thank you!
    -Doug
     
    MediaHustler, Mar 26, 2007 IP
  2. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #3
    This will be great MediaHustler; the CSS will work with gecko-browsers. Currently, I only see B&W images on yayfreegames.com with FireFox : (
     
    Stomme poes, Mar 27, 2007 IP
  4. MediaHustler

    MediaHustler Peon

    Messages:
    1,860
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    0
    #4
    If you hover over it should turn to color.

    =)
     
    MediaHustler, Mar 27, 2007 IP
  5. Josh Inno

    Josh Inno Guest

    Messages:
    1,623
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I'm not the most experienced with roll over, but if you combine :hover with the 'hidden' attribute for two different versions of the image (one black and white, one color), it should work.
     
    Josh Inno, Mar 27, 2007 IP
  6. Bagi Zoltán

    Bagi Zoltán Active Member

    Messages:
    364
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    60
    #6
    If i were you i would create divs for each images with the same width and height attribute as the images have. If you define different classes for them you will be able to specify a hover state background-image for each divs.
    I guess it should work. ;)
     
    Bagi Zoltán, Mar 27, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Nope. My FF version is 1.5.0 mouse does nix (though I can click fine).

    Edit: I had also checked with my crippled IE (I'm running Linux so I'm using WINE) and I saw the cool color highlight change thingie. It does look very cool. Transparent gifs. Can't wait for browsers to learn to see PNGs (and by browsers I'm arching an eyebrow at IE specifically) so we's can use semi-transparencies!
     
    Stomme poes, Mar 27, 2007 IP
  8. MrX

    MrX Active Member

    Messages:
    1,564
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    90
    #8
    Don't use hidden divs or none of that stuff. Here's the correct CSS image rollover method: http://www.monkeyflash.com/css/image-rollover-navbar/

    Basically you make both states (plain/hover) as one image. Then you simply reposition its display via the background-position property so it shows the "rest" of the image on hovers. That also gets rid of the need for preloading the hover images via JS.
     
    MrX, Mar 27, 2007 IP
  9. MediaHustler

    MediaHustler Peon

    Messages:
    1,860
    Likes Received:
    46
    Best Answers:
    0
    Trophy Points:
    0
    #9
    That's a slightly old FF version. =)
     
    MediaHustler, Mar 27, 2007 IP
  10. Stomme poes

    Stomme poes Peon

    Messages:
    3,197
    Likes Received:
    135
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ^Yeah, though I guess lots of people didn't move to FF2.
     
    Stomme poes, Mar 27, 2007 IP
Thread Status:
Not open for further replies.