16 May Image rollover in wordpress, no plugins required
Quite an annoying aspect of WordPress is that its not very easy to use an image rollover from within posts. This is a simple hack that lets you use an image rollover in WordPress without the use of a plugin.
[raw]
<img title="this" onmouseover="this.src='https://twentyeleven.co.uk/wp-content/uploads/2012/05/that.png';" onmouseout="this.src='https://twentyeleven.co.uk/wp-content/uploads/2012/05/this.png';" src="https://twentyeleven.co.uk/wp-content/uploads/2012/05/this.png" alt="" width="192" height="116" />
[/raw]
Luciana Amaral
Posted at 21:56h, 02 Augustthank you very much, this was so helpful 🙂
evan
Posted at 03:09h, 23 SeptemberThanks for this, but how do I implement this code? Where do I add it?
I want to use an image rollover for the image thumbs on my blog.
Thanks!
admin
Posted at 10:49h, 23 SeptemberHi, it depends on how your theme is structured. If you send me a link showing which thumbs you want changing I can help you. This method uses the normal WordPress post.
brian glenn truex
Posted at 00:39h, 25 SeptemberOMG – I’ve been searching for over an hour for a simple image rollover solution – this looks like the BEST by far. I REALLY want to learn how to do this… but I am still a WordPress Newbie and could use a little help… please :>)
I’m setting up my Artist website and working with a theme… I love it but the creator is NOT very helpful when I want to make changes or ask about something new. I have three images on my Gallery home page, just placed right now – but I want to link them to my three galleries – EZ – and have an image rollover.
Here’s the URL if you can help…
http://www.briantruex.com/gallery/
Would I be right in the order of things by saying – 1st: Upload desired rollover image to media library and copy URLs, 2nd: Insert your static image on desired page in page editor, 3rd: link the image to desired page, 4th: Insert your code in the HTML view of the page editor? Update.
If my ordering is correct??? I need help with #4 please!
If there’s anything else I can do, like a snapshot of my Edit Page HTML or something just let me know….
Thanks a TON if you can help…
Sincerely,
brian glenn truex
chicago
admin
Posted at 10:31h, 25 SeptemberHi brian,
I noticed that you are using nextgen gallery which I assume you are using a shortcode to call the gallery links in your homepage. As nextgen gallery is quite restricive in some ways you are best off coding the links to the galleries on your homepage as follows. Here is an example for your painting gallery.
brian glenn truex
Posted at 04:50h, 25 SeptemberYahooooo!!!! Got it :>) :>) :>) Super Useful for ARTISTS :>)
Thank you soooo much!!!
brian glenn truex
brian glenn truex
Posted at 03:00h, 30 SeptemberDear 2011 – thanks for the reply – a bit over my head I’m afraid. I used your original code and it works fine on my computer and different browsers… but NOT on an ipad??? This might be beyond my skill level. The links work but no rollever image when I pull it up on my wife’s ipad.
It was worth a try… maybe some day there will be a simpler way.
b
brian glenn truex
Posted at 03:18h, 30 SeptemberDear 2011, I was VERY happy with finally figuring out how to insert your code into the html view of my page editor…. and it worked fine – is there any simple amendment I could make so it would function on an ipad as well?? Your last missive was a bit beyond my ability. As I mentioned before I am working with a theme and it’s been very difficult trying to customize it. It would suck if I couldn’t keep this rollover… it’s one of the FEW successes I’ve had.
Thanks
b
jon messing
Posted at 19:03h, 27 FebruaryHey man, Brilliant piece of work here, this helps A LOT! I’ve been wanting to add rollovers to WP for a while…this was great!
admin
Posted at 19:12h, 01 MarchNo problem. Glad I could help.
FHP
Posted at 11:26h, 15 AprilHello,
thank you for the code.
When I enter it in in wordpress in the html window then it appears like it should in the visual window. But when I publish it then wordpress automatically changes the code from
“”
into
“”
Then there is just one picture.
What could be the problem?
Thank you for your help.
FHP
admin
Posted at 11:34h, 15 AprilHi I couldn’t see your images in your comment, but if you provide me a link to your website I can take a look for you or alternatively send me the code you are using to studio@twentyeleven.co.uk.
Andrew
Posted at 21:07h, 25 AprilTHANK YOU SO MUCH IT WORKS !!!!!
leo
Posted at 09:38h, 30 Maythank you!!! It was so simple! great man!! 🙂
dan
Posted at 14:07h, 30 MayThanks a lot
Sam
Posted at 08:55h, 19 JuneHi,
this is amazing, thanks for taking the time to post it.
If i wanted the rollover image to be a link, how would i do that?
Ive tried adding an link as standard and it does link, BUT, the image does not revert back to the 1st state when you remove the cursor, it just stays on the rollover.
Many thanks
Sam.
Renu
Posted at 06:38h, 08 AugustThanks a ton for posting this.
Regards
Renu
Enmanuel
Posted at 20:03h, 05 JulyThis short post explains how to create a slide up animation for your WordPress site in seconds using a plugin. No code necessary.
http://wpvisualslideboxbuilder.com/how-to-create-a-wordpress-slide-box/
Leah
Posted at 16:07h, 23 OctoberHelp!
I used this:
But wordpress.com is still blocking the html. Did I do something wrong?