Posted by: Lois Lindemann on: December 27th, 2009 
Posted in: 
Tags for this post: 
My student website is long overdue for a major revamp. I decided to rebuild the site using WordPress, which is going well, but some of the things I want to do are not automatically built in, so I thought I’d try to write some very simple guides as I work out how to do things.
My students all seem to like rollover images, so I wanted to incorporate them. Here’s how I did it:
You will need:
- A self-hosted WordPress blog. This simply will not work for a blog that is hosted on WordPress.com, because this process requires Javascript, which is not allowed on WordPress.com blogs. (That’s one of the many reasons I opted to go for the self-hosted option.)
- A folder somewhere on the web to hold your images.
- A text editor, such as Notepad.
Step One – Create some images
You will need two images – the basic image that will appear at first and the image that will replace it when the user hovers their mouse over. Obviously these images should be the same size! I created gifs, but pngs will also work. You will need to stick to one format, don’t use a mixture of file types.
Your rollover image needs to have the same name as the basic image, but with an ending such as _over added at the end: e.g. my-image.gif and my-image_over.gif
Once you have finished, upload your images to the web. You must save the two images in the same folder.
Step Two – Create and upload a Javascript file
Actually, no knowledge of Javascript is required here, because Atlanta Jones has created and shared a tutorial and a script that works perfectly. If you have created gif files and used the _over ending on your file names, you can simply download and use this file: rollover.js. Alternatively you can copy and paste this script into a text editor (NOT MS Word – I used notepad) and save it as rollover.js:
jQuery(function($) { $(document).ready(function() { // Preload all rollovers $("#hoverlink img").each(function() { // Set the original src rollsrc = $(this).attr("src"); rollON = rollsrc.replace(/.gif$/ig,"_over.gif"); $("<img>").attr("src", rollON); }); // Navigation rollovers $("#hoverlink a").mouseover(function(){ imgsrc = $(this).children("img").attr("src"); matches = imgsrc.match(/_over/); // don't do the rollover if state is already ON if (!matches) { imgsrcON = imgsrc.replace(/.gif$/ig,"_over.gif"); // strip off extension $(this).children("img").attr("src", imgsrcON); } }); $("#hoverlink a").mouseout(function(){ $(this).children("img").attr("src", imgsrc); }); }); });
If you have changed filetypes or endings, you will need to edit the script with your text editor to change anything that says .gif to .png, or anything that says _over to match the ending you used on your file names.
The script tells WordPress to pre-load your rollover images and what to do when the mouse is rolled over and off. It is dependent on a tag called hoverlink (I made that name up, you can change it if you want). We’ll use this tag in step four.
Once you have your Javascript file, you need to upload it. It needs to go in the root folder for the theme that you are using in Wordress. You will end up with a file at /wp-content/themes/whateveryourthemeiscalled/rollover.js
Step Three – tell WordPress to use the file that you just created
The good news is that WordPress comes bundled with JQuery, so all you have to do is tell it to use it. Even beter, Brian at frodesigns.com has kindly shared the code that is needed.
You will need to edit your header.php file, find this by clicking on Appearance, then Editor. First find the <head> tag. NB in some themes the the <head> tag may not look exactly like that, so you may need to look for something like this: <head with-some-extra-code-here>.
Once you’ve found the <head> tag, copy and paste this code directly under it:
<?php wp_enqueue_script('jquery'); wp_enqueue_script('jquery-core-ui'); wp_enqueue_script('jquery-tabs-ui'); wp_enqueue_script('hoverlink', get_bloginfo('template_directory').'/rollover.js'); wp_head(); ?>
You can see the penultimate line directs WordPress to the jQuery code for the image rollover effect that we are creating. It also refers to the hoverlink tag that we’ll use in the next step.
Step Four – putting your images into a post or page
Now you can actually put your images into a post or page. The last bit of technical trickery is to put your images inside a section tagged "hoverlink". To do this, use the html editor to create your page or post, rather than the visual editor.
This is the code that I used to create the image at the end of this post:
<div id="hoverlink">
<a href="http://www.morethanmaths.com/teacher"><img src="http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" /></a></div>
You can see that the code relating to the image is contained inside two tags: <div id="hoverlink"> and </div>. Obviously you will need to change the highlighted sections to match your own choice of hyperlink, image location and size.
Want a rollover image that isn’t hyperlinked? No problem:
<div id="hoverlink">
<a><img src="http://www.morethanmaths.com/teacher/sample-files/2009/12/my-avatar.gif" border="0" alt="My Avatar" width="220" height="220" /></a></div>
Want your rollover image in a sidebar? Add a text widget and put the code into that. WordPress will recognise the code and display the image with the rollover effect enabled.
Here’s the finished product:
There’s also an example of a rollover image in the sidebar of this blog, try rolling your mouse over the juggler to see it action – it’s a fairly subtle effect this time.
I’m not a Javascript expert – in fact I know next to nothing – but I got this working with little more than copy and paste. I’ve tried this with WordPress 3.0, 2.9 and 2.8.6, using the Atahualpa and the Default themes. I tested the finished product in Firefox, Chrome and Internet Explorer. As far as I can tell, it’s working perfectly.
Update: Drew left a really useful comment explaining how to get this to work if you are using a child theme:
“I was having a problem getting the rollovers to work. The problem was I am using a theme that is a CHILD theme of another (Graph Paper Press): the Parent theme (Modularity) is installed first and the Child theme (On Assignment) is then installed and activated. The .JS file needs to be uploaded to the PARENT theme (Modularity); it does not work if only uploaded to the in-use child theme.”
Update 2: I’ve done several theme upgrades without problems, but after a recent upgrade on one of my sites I found that I had to do some repair work. If the rollover effects stop working, it’s worth checking that the rollover.js script is still there and the code after the <head> tag is still there. Mine got deleted 
Update 3: John left a comment about getting this to work with tables and has shared his code. Thanks John!
<div id="hoverlink">
<table>
<tr>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
</tr>
<tr>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
<td><a href=""><img src="MY IMG URL" border="0" alt="My Avatar" width="150" height="220" /></a></td>
</tr>
</table>
</div>
[...] This post was mentioned on Twitter by Lois Lindemann, Lois Lindemann. Lois Lindemann said: Blogged: Creating Rollover Images in WordPress http://bit.ly/86se6S [...]
[...] Creating Rollover Images in WordPress [...]
I’m using the same wordpress theme, Atahualpa, for several of my sites, I followed the steps you indicate above, but I’ve never been able to get the “rollover” image to work. I’m using .jpg and changed the extension to .jpg on the javascript file. Is there anything special you did using Atahualpa that made it work?
No, I didn’t do anything special using Atahualpa… but I only tested this with .gif and .png files, not with .jpg. I’ll see what happens if I change mine to .jpg and let you know!
I was looking everywhere for a script like this and now that the code is in my site, i can add div id anywhere and use this effect. You are the best, great instruction.
Thank you so much for this post… this made what I had been racking my brains to achieve, easily and quickly possible!
Chris
Hi, I want to use CSS rollovers instead of javascript. I used this tutorial:
http://www.elated.com/articles/css-rollover-buttons/
I created some buttons with this, now how do I put them into WordPress? Could I use your header code, or is that just for javascript? I don’t know what to put in the header file. And, where do I put the CSS rule–in the css.style page I guess but where? I’m using a premade theme. If you could help I would so appreciate it! Thanks!
Sorry Vicky, I really don’t have any experience of doing this with CSS. Have you tried looking on the forums at WordPress.org ? I’ve found lots of useful advice on there to a whole variety of issues.
Thanks, yes I have looked at them, and I sort of have learned how to do the CSS rollovers but but there is nothing specific that explains getting into WordPress. I know I’d have I’d have to edit the PHP file but what I’d have to put in it is an unknown to me. I asked on another forum.
Hi,
Thanks so much for this and your clear instructions, it works like a charm (mostly)!.
I used the rollover effect on a logo image which is located in header.php file.
The problem is that it’s NOT working on certain pages:
1. the MAIN BLOG page and BLOG CATEGORY pages (but works on single post pages)
2. custom post type “PROJECTS” CATEGORY pages ( but works on the main “Project” page and on a single post “Project” page)
I’m new to all this but seems it’s not working correctly on pages with a “loop” (the blog/index loop and my custom post type “Portfolio” loop (called “Projects” in my NAV ) ?? somehow the “loop/s” are interfering?? just guessing…
(I’ve already spent much time searching/looking in codex and googling; js rollovers wordpress not working ….and not finding any leads/info so far….)
Any ideas? Or, if anyone can point me in a direction to look, it would be very much appreciated!
Thanks in advance.
Works great, took me some time to get rolloverimages to work on my new site, but this tutorial was exactly what I needed. kudos !
Hi,
Just to update; in my header.php file, I moved the “rollover” js script code BEFORE the other existing js code that was already there ( I had originally placed it after) and it corrected the issue!
How does one figure out these “rules” or are they “bugs”? I was just trying anything I could after hours of researching!
Thanks again for the well laid out, very clear tutorial. I can tell you know how to impart information and teach!!
Thanks for this – very clear and works perfectly. Just a small note that if you’re using this all over a page then it’s best to change to a class rather than id (.hoverlink works) or else you’ll get some issues.
Will
You are the best. Your guide is great. Very easy and efficient. It worked perfectly
Thanks a lot!!!!
Here is what I did:
http://www.mondolastminute.com/chi-sono/
Btw… I still have to develop all site ;-P
[...] http://www.morethanmaths.com/teacher/2009/12/27/creating-rollover-images-in-wordpress/ [...]
[...] THis comes from a nice tutorial that you can find here. [...]
Hi Lois,
Thank you so much for this. Is it possible to use the same coding but upon rollover to get something other than an image e.g. a link to a url or a document?
Thanks in anticipation.
Brenda
I would to find a widget rollover or something to take a small set of pictures laid out on a page. So when you rollover the image it gets larger and if you like what you see you can click on the larger image and go directly to that link from that image. I am on google now looking!!!
Hi
Your tutorial is very easy to follow but I can’t seem to get it to work. Where do I upload the rollover.js file to? at the moment I’ve put it in /wp-includes/js/rollover.js is that correct?
I’d also love to know how you got the follow me twitter image to stick to your browsers sidebar! I’ve been looking for a tutorial for that for a long time.
Thanks
Hi James,
Glad you found it useful! Surprisingly, the
rollover.jsdoesn’t go in ajsdirectory. It should be in/wp-content/themes/whateveryourthemeiscalled/rollover.jsI’ve updated the original post to make that clearer.
The Twitter badge doesn’t need a tutorial – it’s a very easily configured plugin called WP FollowMe.
Just install the plugin, activate it and go to settings -> WP FollowMe, it’s really easy to set up.
The plugin comes with a choice of images, but I wanted one of my own. I uploaded a couple of of 32 x 32 pixel png images made from Chris Spooner’s Twitter birds to replace some of the images that were supplied with the plugin (I just gave these the same names as a couple of the images in the plugin’s icons folder, the plugin displayed the new images auto-magically).
Hi love your post but I am a beginner and I could use some help if you have a moment to explain a few questions.
1. In the original java script, I am not sure if I am suppose to change the .gif reference to .jpg (in my case, or the entire file name.)
2. in the final script I am not understanding if my script is correct
Specifically alt= is that suppose to be the original?
Thank you in advance, for the help.
Hey, thanks for the script it worked a treat.
Just pointing out a few things in the rollover.js that people should be mindful of if they’ve changed their file extension to png or jpg (jpg’s work!)…. There are four locations in the .js file you need to change:
Line 8:
rollON = rollsrc.replace(/.gif$/ig,”_o.gif”);
Two instances here in the brackets, where it says .gif twice… the _o.gif is my “over” image extension and file type. I changed both instances of .gif to .jpg
and Line 19:
imgsrcON = imgsrc.replace(/.gif$/ig,”_o.gif”);
Pretty much the same deal
Hope this helps anyone else wanting to get this to work. Thanks again for solving my 4 hour headache prior to finding this page. 
lol
Aha! Great tutorial but I was having a problem getting the rollovers to work. The problem was I am using a theme that is a CHILD theme of another (Graph Paper Press): the Parent theme (Modularity) is installed first and the Child theme (On Assignment) is then installed and activated. The .JS file needs to be uploaded to the PARENT theme (Modularity); it does not work if only uploaded to the in-use child theme.
Thanks for that Drew – I’ve added that as an update to the post. Hope that’s OK!
This was a lifesaver! I’ve tried getting rollover images to work using instructions from several other websites, and had no luck until I found your page. The instructions were so clear and I finally found success. Thank you!
Thanks for this very easy to use and wonderfully working script!
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!!
Thanks so much I finally found a method that works!!!
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
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.
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).
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.
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 3×2 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?
Hello!
Great tutorial.
In wich versions of explorer have you tested? I can´t make it work in version 7.
/Linda
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.
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!