How do I utilise Rollover Images within WordPress?

  • Author
    Posts
  • #528668

    panarchy
    Member

    Hello,

    How do I add Rollover Images to my WordPress blog?

    The plan is to upload an image for the header, and on mouse-rollover, the header temporarily inverts or is ephemerally replaced by a different header image.

    Please tell me how to do this using WordPress.

    Thanks in advance,

    Chip D. Panarchy

    The blog I need help with is panarchy.wordpress.com.

    #528842

    panarchy
    Member

    Hmm, appears this website has a nice tutorial, using jQuery;
    http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

    Would you recommend installing & using jQuery on my blog just for that effect, or would it be worth implementing in CSS or plain-javascript instead?

    #528846

    raincoaster
    Member

    I recommend you give us the URL of the blog in question, starting with http. The answer depends on the blog.

    #528947

    Is there an easy answer to this question that anyone know of?

    I’m working on an advent calendar for next month and would like to make it a bit groovy with rollover images.

    #528948

    timethief
    Member
    #528949

    Thanks again timethief.
    As I’m not web-clever and don’t have the upgrade, I think i’ll just go lo-fi and keep it simple!

    #528950

    There is a way to do rollovers with CSS also, but it would require some CSS experience and the paid CSS upgrade.

    I’ve found some HTML only rollover code, but cannot get it to work here at wordpress.com. WordPress keeps changing the code on my and messing it up.

    #528951

    rachelmetea
    Member

    How would you go about doing this with the upgrade?

    #528952

    Do a search for “css only image rollover” and you will find a number of examples. You will have to look through them to see which will work best for you.

    #528953

    rachelmetea
    Member

    Is it supported in WordPress?

    #528954

    roxygurl189
    Member

    Im wanting to do the exact same thing. I just bought the upgrade, have NO css experience whatsoever, but am willing to learn. Im trying to do a mouse roll-over for a before and after picture, you see the before, and once your mouse moves over the image, the after photo shows up.

    Anybody care to help me figure this one out? Id GREATLY appreciate it!

    #528955

    raincoaster
    Member

    You are not advised to buy the upgrade if you don’t already know how to use CSS. We generally recommend you practice with the free Preview till you’re good enough to make the changes you want.

    #528956

    Take a look at this recent thread on the same subject. Hallluke provides a way to do it.

    https://en.forums.wordpress.com/topic/image-rollovers-in-wordpresscom?replies=8

The topic ‘How do I utilise Rollover Images within WordPress?’ is closed to new replies.