Creating Rollover Images in WordPress

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>

68 comments to Creating Rollover Images in WordPress

  • Hey Lois,
    Just the best, most useful tut – so nicely laid out…thank you so much.

    I was wondering if there is any easy way to slow down the transition on hover a little? Ive tried a few things I googled and they didnt work.

    Big thanks again,
    Charlie

  • Lois Lindemann

    Hi Charlie, I’m not sure how you would do that. I think you would need to modify the code to include an instruction to wait – but I’m not sure how well this would work. When I’ve watched students using my own site, they expect an instant result when they click/hover/touch a button, so slowing things down hasn’t been something I’ve attempted!

  • steve_godalming

    Er – Rollover not working for me in FFox or IE – and the juggler IS working without needing a rollover (On this blog not my attempt).

    Any ideas??

    steve

  • Lois Lindemann

    Hi Steve,

    Thanks for pointing that out! I updated my blog’s theme a while back. Normally that doesn’t cause any problems – but sometimes the rollover.js script gets deleted. I’ve put it back – it’s now working again.

  • I have to really thank you because for whatever reason, every other rollover technique I tried with my wordpress site did not work. Annoying since it’s such an easy thing to do in a regular html based website! But with your help, I got a grid of photos on my home page that roll over beautifully! Thank you, Lois!

  • Lois Lindemann

    Hi Colleen, glad it helped. I had exactly the same problem, which is why I wrote this up once I’d finally got it to work.

  • Let me add my name to the chorus, Lois! I needed a technique to match the effect on a site I’m re-creating. Didn’t work at first, then did it again, line-by-line, and voila!

    And with animated gifs, too!

  • Lois Lindemann

    Thanks Steve – glad you found it helpful!

  • I forgot to ask: Can this technique be used for rollover image replacement buttons? The site I’m working on features that too.

  • Lois Lindemann

    That’s how I used it on my student website http://www.morethanmaths.com – the navigation buttons are all images that use this rollover script.

    The buttons are just hyperlinks to other pages though – I haven’t tried it with anything more complex.

  • Ronny

    Hi there,

    I was wondering if you would have any Idea on how to have a Big Image center page which changes when you rollover the smaller thumbnails at the bottom of the page? so similar I guess to the rollover thing except instead of the original image changing a fixed image will change to the image_over.ext?

    Thank you

  • Ronny

    here is a website with the desired effect Iam looking to replicate in wordpress;

    http://www.lummisjoinery.co.nz/riverstone.htm

    thank you.

    ps: notice that when the image is rolled off that it stays the same in the main image.

  • addy

    thank you!!!! Any chance you know how to add rollovers to images in a header file (php)?

  • Lois Lindemann

    Hi addy – sorry for the late reply – I only just spotted your comment!

    Sorry, I’ve not tried it with headers – I use header images, but my blog’s theme just pulls a random image from a folder.

    Did you get it to work?

  • Ronny,

    I found a tutorial that explains how to get the effect you want.

    https://www.dougv.com/2007/06/14/showing-a-larger-image-on-thumbnail-mouseover-with-javascript-dom/

    The guy used several shots from a SI swimsuit issue. Depending on where you work you might not want to view the example unless your on a home machine 😉

    Lois,

    This tutorial is great and was what I was looking for when I found the other. Thanks for your help!

  • Lois Lindemann

    Thanks for that link Ronny – that’s something I want to investigate too.

    Glad you found this post useful.

  • @fbgchase @ScottSalmon48 http://t.co/RjBt9TqvBs best I could find

  • Raj

    Hi Lois

    Thanks a ton you are an angelic help for a non coding background person like me

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  

  

  

+ 57 = 66