Friday, September 23, 2011

onmouseover: How to change an image

I think this is SUCH a cool effect, and with a great variety of uses!

Turns out, it is NOT that hard to attain on a blogger blog, without a fancy plugin!
  • Press Ctrl+F or Apple+F to bring up the search bar. 
  • Search for /head
  • Simply Copy and paste the following code directly before </head>

<script language="JavaScript">
img0_on = new Image(width,height);
img0_off = new Image(width,height);
function over_image(parm_name)
        document[parm_name].src = eval(parm_name + "_on.src");
function off_image(parm_name)
        document[parm_name].src = eval(parm_name + "_off.src");

  • Next change the images in red to your images. Image 1 is what will show when someone hovers over the image, and Image 2 is the original image.
  • Next paste the new image html where you would like this effect to appear on your page.

<center><a href="YOUR LINK" onmouseover="over_image('img0');" onmouseout="off_image('img0')"> <img src="IMAGE 2" border="0" name="img0"> </a>

  • Change IMAGE 2 to the same image 2 as you pasted into the head of your page
  • Change YOUR LINK to...your link ;-)
And Voila! You have a really cool effect!

***It is important to note***
  • Blogger will change the html on you if you toggle between "edit HTML", and "Compose". You MUST publish post from the "Edit HTML" view or your effect will be lost.
  • If you would like to use this effect in more than one location, you must add the additional images into the head of your page.

img1_on = new Image(width,height);
img1_off = new Image(width,height);

  • Change to img1, for your second effect, img 2 for your third, etc.
Don't hesitate to comment or contact me with any questions! I'm always glad to help:)