Image Rollover JavaScript

Here’s a script to add to your styling when designing your blog. This script makes an image change or switch to another when the mouse is placed over the original image. This can be applied to almost anything on a site that’s in image format. For example, navigation menus, subscription and advertisement boxes, and social network links on your site or blog.

Click here to see the demo

Steps to follow

1. Add an HTML/JavaScript from the Page Elements tab under Layout.

2. Copy and paste the following section code below as the HTML/JavaScript.

<span id="preserveffbe76c340be4993b6bb3082b0eda474" class="wlWriterPreserve"> <script language="Javascript"> <!-- //Slide Show script (this notice must stay intact) //For this and more scripts //visit java-scripts.net or http://wsabstract.com if (document.images) { button1 = new Image button2 = new Image button1.src = 'img1.gif' button2.src = 'img2.gif' } //—> </script> </span> <a href="http://www.blogspotvision.com" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="img1.gif" border="0" name="rollover"></a>

Note: You will have to replace the .gif file to the link where your image is located. Where “img1.gif” represents the original image and “img2.gif” represents the rollover image.