How To: Photo Mouse-Over Trick

Doing this cool mouse-over trick is not hard and it is a fun way to draw attention to a post.

Here’s how you do it.

1. You need two separate images. In my case, I used two copies of the exact same image (the cystal ball with sorcerer).  I saved one image and then, using Picnik,  I layered the image by dragging a photo of Scott’s head (the Media Specialist)  into the crystal ball and saved the edited image.

This is Image #1:  (FRONT image)

This is Image #2:  (BACK image)

2. The next thing you need to do is upload the images to some source so that they both have their own URL. I upload my images to Flickr, so I was able to easily grab the specific URL for each photo.  Make sure you make these photos “public.”

The URL for Image 1 (this is the “FRONT” image, or the image I want to be visible when the mouse is not rolling over the photo) is:  http://farm2.static.flickr.com/1340/5142943008_35c2633334.jpg

The URL for Image 2 (this is the “BACK” image, or the image I only want to show when the mouse is rolled over the photo) is:  http://farm2.static.flickr.com/1374/5142339597_26b3eca1a6.jpg

3. The code you need to place in your blog post looks like this:

img onmouseover="this.src=’INSERT BACK PHOTO URL’" onmouseout="this.src=’INSERT FRONT PHOTO URL’" src="INSERT BACK PHOTO URL"/

NOTE: Copy and paste this exact code (when pasting this code, put an < in front of it and an > in back of it), and keep in mind that the URL for the first two is contained within single quotation marks. So on the end of the first two URL’s, there will actually be three quotation marks—the single one, then a set of double ones. I’m sorry if I’m confusing you here.  Just copy and paste exactly, then replace with your URL in the exact spot, and you’ll be okay.  If you get an html error when posting to your website, try to delete the single quotes and reentering them.

Hopefully, if you follow these instructions, you will achieve this particular photo effect (roll mouse over the photo to see it in action)…

While it looks like the image of Scott’s head is magically appearing on my photo, what’s really happening is that the identical photo with Scott’s head in the crystal ball is replacing the original.

The possibilities are endless to how you can use this trick.  I have also done this trick on the Elk River High School Media Center blog to announce a cover reveal for a new book release.

I hope you will try this.  It is really fun and not too difficult!