Comments on: Creating Rollover Images in WordPress

By: Lois Lindemann

Lois Lindemann — Sun, 27 Nov 2011 17:57:50 +0000

Hi Chantel,

I also tried searching wordpress.org for a how to guide/plugin for menu rollovers, also without success.

I’m sure that text styles are possible. My site (www.morethanmaths.com)uses the Atahualpa theme, which built in support for menus before they were available in WordPress. If you have a look at that, or another theme that offers the same functions, that might give you an idea where to start.

I never got around to solving the images on menu bars question. Once I had a working site, I left the menus as they are. I’d prefer a different design, but I’m not sure it’s worth the time that would require!

By: Chantel

Chantel — Sun, 27 Nov 2011 01:47:46 +0000

Thanks for making this tutorial so easy to follow! How would I use this to make the menu bar links rollover or is this possible at all? I’m familiar with some of the code, but just not how to work it into the right place in wordpress. I’m working on http://misscathie.com and want the links in the menu to change to the same text (with the darker color) and a small heart as requested by client when pointed at, but keep getting stuck. Any thoughts or tips? Is this even possible? Searching wordpress.org is getting me pretty much no where.

By: Linda Eriksson

Linda Eriksson — Mon, 31 Oct 2011 10:08:30 +0000

Hello!
Great tutorial.
In wich versions of explorer have you tested? I can´t make it work in version 7.

/Linda

By: John

John — Thu, 06 Oct 2011 09:48:03 +0000

Sorry for being persistent. Please do let me know if I should look elsewhere, but seeing as it's here I found luck so far, and seeing as what I'm trying to do might be, for others as well, a logical extension of what you explained thus far... I used the same markup, simply in a table form (so that I have 3x2 images). The link works, but the rollover effect does not. I suppose I have to change something in the CSS or php to tell wordpress to apply effect here too? Should the div id tag be different?

By: John

John — Wed, 05 Oct 2011 22:06:36 +0000

Hi Lois,
Finally got this working with your tut, after trying dozens of others unsuccessfully. Thanks!
I do however have another question. Would you know how to have the rollover effect over several thumbnails in a single page? I’m trying to produce a 3 by 3 list or table, with images aligned in 3 rows and columns.

By: tori

tori — Wed, 05 Oct 2011 09:15:47 +0000

Type in TinyMCE Advanced when you search for it in plugins. (I couldn’t find it when I typed in MCE or Tiny MCE,with a space).

By: tori

tori — Wed, 05 Oct 2011 02:19:21 +0000

Hi,for those who don’t want to code, you can download the plugin Tiny Advanced MCE, a text editor that lets you do image rollovers as well as gives you MS Word-like editing power.

By: John

John — Tue, 04 Oct 2011 23:10:55 +0000

Hi Lois,
Great tut, thanks!
I’ve tried a great many tuts unsuccessfully so far, and yours works, plain and simple. Well explained.
One question though: I would like to use this feature on all my images in a standard wp gallery. Any idea how to apply rollover to all?

thx

By: Adam Haworth

Adam Haworth — Sun, 04 Sep 2011 19:54:28 +0000

Thanks so much I finally found a method that works!!!

By: Cathy Dunham

Cathy Dunham — Sat, 06 Aug 2011 18:48:13 +0000

Sweet… I just followed your instructions, plus contributor comments, and “Poof” – worked like a charm!
I can now use rollowers on my clients’ WP pages, posts and sidebars. Piece a cake…

You guys are awesome. Just love that Google ranked you at the top of my searches!!