How to Scroll images with mouse over effect

It is one of the interesting effect working with Javascritpt. It allows to move the images Vertically and Horizontally. The following demonstrates how images scrolled on mouse over. It stops and starts scrolling on mouse over.


animation with images with mouse over

Now follow the steps to get this effect.



Step 1: Go to Blogger Dashboard >> Layout tab >> Add a Gadget.

               
               The following is the screen shot.


add a gadget in blogger






Step 2: Simply copy and paste the following piece of code in it.


<marquee onmouseover="this.stop()" onmouseout="this.start()" 
behavior="scroll" align="middle" direction="right" 
scrollamount="8" bgcolor="#FFFFFF">
<img src="http://mywebsite.com/image1.jpg" />
<img src="http://mywebsite.com/image2.jpg" />
<img src="http://mywebsite.com/image3.jpg" />
</marquee>
 



Step 3: Now replace the sources of images with your own images and "Save" as usual to apply changes.



Thanking You.......
Previous
Next Post »
Related Posts Plugin for WordPress, Blogger...