CSS Rollover Images

  • Author
    Posts
  • #231980

    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!

    #232184

    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?

    #232186

    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. :)

    #232256

    boblets
    Member

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

    #232261

    deltafoxtrot
    Member

    Depends on your definition of rollover.

    #232272

    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;
    }

    #232274

    deltafoxtrot
    Member

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

    #232275

    deltafoxtrot
    Member

    I mean the 5-block thingie.

    #232278

    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.

    #232321

    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!!

    #232327

    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.

    #232363

    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…

    #232364

    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.

    #232365

    boblets
    Member

    ah yes. and maybe link to your rollover…

    #232366

    boblets
    Member

    class=”rolloverimagename”>
    hmm… it won’t let me write the link-code, imagine this inside an a -tag

    #232386

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

    #232412

    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).

    #232427

    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 )

    #232428

    boblets
    Member

    ?

The topic ‘CSS Rollover Images’ is closed to new replies.