jQuery-Change image on mouseover

In this article we will explore how to change image on mouse over using jQuery

Change Image on Mouse Over

Let's start writing the example.

Step 1: Add jquery-1.4.2.min.js and style in the header section of the aspx page.




Step 2: Add a div with two asp.net image control. First image control will be used to show processing while image is getting loaded. Second image control will be used to load the image.

Step 3: Add a div which will contain all the thumbnails. Reduce the size of thumbnail image to load it faster. I have reduced the size of the thumbnail images and postfixed it by "-s".

Step 4: Add below javascript in the aspx page. Onmouseover i am removing "-s" from the thumbnail image name to load the bigger image which is without "-s"



Live Demo

This ends the article of change image on mouse over.
Like us if you find this post useful. Thanks!


Download Code