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 and jpegs 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 .jpg, or to change 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.
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 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 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 2.9 and 2.8.6, using the Atahualpa and the Default themes. I tested the finished product in both Firefox and Internet Explorer. As far as I can tell, it’s working perfectly.
[...] 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