How to create a mouse-over image for a wordpress post

This comes from a nice tutorial that you can find here at: More Than A Maths Teacher.

You will need to add a javascript file to the root folder of your current wordpress theme. Code is below. Note the the images I used for the mouse-over are named image.png and image_over.png. For this particular script to work, your images must be names image.png and image_over.png ( “image” stands for whatever you want, and can be replaced). If you want to use another file format, than png, you must edit the code.

jQuery(function($) {
$(document).ready(function() {

// Preload all rollovers
$(".hoverlink img").each(function() {
// Set the original src
rollsrc = $(this).attr("src");
rollON = rollsrc.replace(/.png$/ig,"_over.png");
$("<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(/.png$/ig,"_over.png"); // strip off extension
$(this).children("img").attr("src", imgsrcON);

$(".hoverlink a").mouseout(function(){
$(this).children("img").attr("src", imgsrc);


Nextyou will need to add the following code to your head.php file, somewhere between the tags.

wp_enqueue_script(‘hoverlink’, get_bloginfo(‘template_directory’).’/rollover.js’);

Finally use this format to the post to add the images:


<div class="hoverlink">
<a href=""><img src="" border="0" alt="mouse-over" width="200" height="100" /></a></div>

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>