While I do not prefer to use the mouse-over effect that swaps images in my posts, some of you may be interested in using it and I will show you how to do that. If you have a blog, any blog, you can use it. That is, as long as you can change or edit the HTML code of your posts. You don’t have to have a WordPress blog to be able to use this feature. If you are not sure what I am talking about, mouse over the image below.
Now, why I don’t use this feature?
There are a few reasons why I don’t like to use this feature for my “before and after” photographs.
#1. Delays equal frustration: I don’t like to use to this effect because sometimes the image swap is delayed and that causes readers’ frustration and no one likes that.
#2. Readers do not know when they are expected to mouse over: The other reason why I don’t use it is because an average reader does not necessarily know that he or she is expected to mouse over the image to see the other image. You cannot expect your reader to guess (or to know) when to mouse over the image.
#3. If you tell them to mouse over, you are killing the surprise effect: Yes, you can put a note to mouse over next to the image but that just kills the effect and if it doesn’t work, your readers are not happy. The swap effect should be sort of surprise, like your links. You don’t put a note next to your link to mouse over to see the color change, don’t you?
With all that said, if your “surprise” image is an important part of your post, for instance, the “after” part of your editing process, you will probably do better if you put both, the before and after images next to each other. I don’t know about you, but I like to see both images at the same time, that way I am able to compare them better. Well, I may just be an old-fashioned gal. ; )
The Before and After of a family portrait. I took this photo in the summer of 2010.
When to use the mouse over swap?
I would say anytime you’d like to have some fun or would like to add something extra for your readers like a button in your sidebar that reveals more info when they (accidentally) mouse over. You can be really creative with this effect. Finally, if you like how the swap effect works, go on and use if for every set of images!
Now, how to do it? It’s really simple. All you need is following:
1. Upload both images to your server, blog or a free hosting such as Flickr, Photobucket…
2. Copy the direct URL for both images
3. Type the following code into the HTML section of your post by paying attention to “ and ‘ signs
4. Replace URL 1 with the URL of a photo you’d like your readers to see first
5. Replace URL2 with the URL of the photo you want to reveal with the mouse over.
6. Save post.
That’s it! It’s simple and easy. All you need to do is to have the access to your post’s HTML to insert this code.