Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS Rollover Images

  1. parkrangerolivia
    Member

    Hi, I have been trying for about a week now to allow the space directly below my header (Benevolence themed) to allow for some rollover images as well. Think of it as a second header, with 5 block-images, that are rollovers.

    I am having a LOT of trouble creating a new CSS function for this second "masthead" that will allow rollovers....

    ANY help appreciated! I am even willing to try an IFrame and just put the whole header on another page if I only knew HOW to make a CSS/wordpress supported iFrame code!

  2. boblets
    Member

    I am not very familiar with wordpress yet, nor your theme, but I cannot see why you can't make css rollovers. Is the problem to write the css-code? You have uploaded your double image and all that? And it is inside a <div> that will allow/have enough space?

  3. deltafoxtrot
    Member

    You cannot embed an iFrame. My trick in similar situations is using HTML in a text widget with absolute positioning via CSS.

    If you put up a link I can give you more feedback. This sounds as if I could learn something in the process. :)

  4. boblets
    Member

    Pardon my ignorance, but can you not make a pure css-rollover?

  5. deltafoxtrot
    Member

    Depends on your definition of rollover.

  6. boblets
    Member

    Hm, yes... I think maybe I'm missing out on something here. I was thinking something like this:

    .rollover a {
    display:block;
    background: url("rollover-image.gif") 0 0 no-repeat;
    }
    .rollover a:hover {
    background-position: 0 -35px;
    }

  7. deltafoxtrot
    Member

    We're together on this one. So the question remains how complicated it's going to be.

  8. deltafoxtrot
    Member

    I mean the 5-block thingie.

  9. boblets
    Member

    Oh, good. What I don't quite understand, is what parkrangerolivia means by:

    "...allow the space directly below my header to allow for some rollover images.."

    and

    "...creating a new CSS function for this second "masthead" that will allow rollovers...."

    hence my three initial questions: Is the problem to write the css-code? You have uploaded your double image and all that? And it is inside a <div> that will allow/have enough space?

    Please enlighten, parkrangerolivia.

  10. parkrangerolivia
    Member

    hey ya'll, basically, i have been trying to put this header with the navigation rollover images into the CSS editor: http://www.googly-eyes.com. I am just having a lot of trouble writing a CSS code that allows me to do this...

    thanks guys!!

  11. boblets
    Member

    Girl, actually ;-)
    That one seems to be java, but never mind. Css is fine :-) So basically, this is the idea:
    Test on one image first.
    Save the "original" image above the "hover"-image in a (for example) .jpg. This gives you one .jpg with both hover and non-hover in the same file.
    Put in the code I gave above, fiddle a little with the -35px to fit with the distance between your two images.
    Make sure the path to the image is correct.
    You can try it out locally first, to make sure the code works.
    Try this and tell us how it goes.

  12. parkrangerolivia
    Member

    oo, my bad lady!

    i tried the code you gave me above- but i'm not sure where exactly in the script i should place it? do i insert it below the masthead group?

    sorry, im actually really terrible with CSS. if i can't do it in Dreamweaver, i lose all web-based intelligence! thanks for being patient with me...

  13. boblets
    Member

    Hehe- funny - I'd be totally lost in dreamweaver.
    I don't think it really matters where you put it - I put my messy bunch of rollovers in a pile somewhere near the bottom of my css-script. Maybe someone else have a proper way of doing it.

  14. boblets
    Member

    ah yes. and maybe link to your rollover...

  15. boblets
    Member

    class="rolloverimagename">
    hmm... it won't let me write the link-code, imagine this inside an a -tag

  16. parkrangerolivia
    Member

    haha okay, i'll give that a try. thanks a lot! :)

  17. boblets
    Member

    parkrangerolivia - I have made a small tutorial in my blog - click my username, and hopefully it will all work out (I have no other way of contacting you).

  18. limeboy11
    Member

    use camtasia studio5,
    Save & Upload It To Your WordPress...
    change the "background color" to background image on your header and put the url in,
    CLICK SAVE!
    {[(Limeboy11)]}
    ( http://www.limeboy11.wordpress.com )

  19. boblets
    Member

    ?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags