How do I utilise Rollover Images within WordPress?

panarchy · Member · Oct 12, 2010 at 12:28 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
panarchy · Member · Oct 12, 2010 at 12:39 pm
Copy link
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?
raincoaster · Member · Oct 12, 2010 at 1:09 pm
Copy link
I recommend you give us the URL of the blog in question, starting with http. The answer depends on the blog.
somethingsthat · Member · Nov 18, 2010 at 7:34 pm
Copy link
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.
timethief · Member · Nov 18, 2010 at 7:49 pm
Copy link
@somethingsthat
See what TSP says here > https://en.forums.wordpress.com/topic/image-rollovers?replies=6#post-249619
somethingsthat · Member · Nov 18, 2010 at 7:52 pm
Copy link
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!
thesacredpath · Member · Nov 18, 2010 at 8:22 pm
Copy link
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.
rachelmetea · Member · Nov 21, 2010 at 3:05 am
Copy link
How would you go about doing this with the upgrade?
thesacredpath · Member · Nov 21, 2010 at 3:49 am
Copy link
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.
rachelmetea · Member · Nov 21, 2010 at 8:31 am
Copy link
Is it supported in WordPress?
roxygurl189 · Member · Nov 22, 2010 at 6:28 pm
Copy link
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!
raincoaster · Member · Nov 22, 2010 at 7:02 pm
Copy link
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.
thesacredpath · Member · Nov 22, 2010 at 7:15 pm
Copy link
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

No items found.