jQuery-Change image on mouseover

jQuery-Change image on mouseover

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

 
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.
 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<style type="text/css">
      .divImage
      {
            width: 576px;
            height: 352px;
            display: block;
            padding-bottom: 20px;
      }

      .imgThNail
      {
            height: 29px;
            width: 47px;
      }
      .span
      {
            padding: 2px;
      }
</style>
 
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.

<div id="bigImage" class="divImage">
      <asp:Image ID="Img1" src="Kizashi/processing.gif" Style="padding-left: 250px; padding-top: 150px;display: none;" runat="server" />
      <asp:Image ID="loadImage" src="Kizashi/2010_suzuki_kizashi_30_2_cd_gallery.jpg" Style="padding-left: 7px;padding-top: 10px;" runat="server" />
</div>
 
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".
 
<div>
      <span>
            <asp:Image ID="imgJ" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_30_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgB" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_13_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgC" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_15_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgD" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_19_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgE" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_2_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgF" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_20_2_cd_gallery-s.jpg" />
      </span><span>
            <asp:Image ID="imgG" class="imgThNail" runat="server"ImageUrl="Kizashi/2010_suzuki_kizashi_23_2_cd_gallery-s.jpg" />
      </span>
</div>
 
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"
 
<script type="text/javascript">
      $(function() {
            $("img.imgThNail").mouseover(function(e) {
                  var imgName = $(this).attr("src").replace("-s", "");
                  $(this).css({
                        border: 'solid 1px red'
                  });

                  $("#loadImage").css({
                        display: 'none'
                  });
                  $("#Img1").css({
                        display: 'block'
                  });
                  $("#loadImage").attr('src', imgName).load(function() {
                        $("#Img1").css({
                              display: 'none'
                        });
                        $("#loadImage").css({
                              display: 'block'
                        });
                  });
            });

            $("img.imgThNail").mouseout(function(e) {
                  $(this).css({
                        border: 'solid 0px red'
                  });
            });
      });
</script>
 
Live Demo