When you want to include a photo retouch on your web site, displaying the before and after photos side by side makes it difficult for people to see the differences between the original and your work. A better way to showcase your fixes is to use a mouseover to display the original photo in place of the retouched version when someone hovers their mouse over it.

There are a lot of ways to do mouseovers, but I use a javascript one liner because its simple and portable between different blogging systems. I can’t really take credit for writing this code because similar ideas have been floating around the web for over a decade.

All you have to do is paste the following code into your web page, taking care to replace the one instance of original.png and two instances of retouch.png with the locations of your own photos. If you want the mouseover to link somewhere, be sure to replace the # with a valid link.

Simple Code For A Javascript Mouseover

<a href="#" onMouseOver="document.the_image.src='original.png';" onMouseOut="document.the_image.src='retouch.png';"> <img src="retouch.png" name="the_image" /></a>

The code above uses the_image as the image name, which works fine for a single image, but if you want to use show multiple mouseovers on the same page, copying and pasting the code above several times won’t work without a quick modification. Because each image needs to be named independently, you would need to change the three instances of the_image in the second copy of the code to something like the_image2. The third would have to be changed to the_image3, and so on.

Multiple Javascript Mouseovers On A Sigle Page

<a href="#" onMouseOver="document.the_image.src=original1.png';" onMouseOut="document.the_image.src='retouch1.png';"> <img src="retouch1.png" name="the_image" /></a>

<a href="#" onMouseOver="document.the_image2.src='original2.png';" onMouseOut="document.the_image2.src='retouch2.png';"> <img src="retouch2.png" name="the_image2" /></a>

Javascript Mouseover In Action

Hold your mouse over the “Geekantium” image to change it.

Posted in Geeky