Thursday, December 22

jQuery - Change blurred image on mouseover


In this article we will see how we can change blurred image on mouse over using jQuery.
 
 
jQuery Blurred Image
 

Let's see how we can do this.
 
Step 1: Add jQuery jquery-1.4.2.min.js in the header section of the page.
 
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

Step 2: Place below HTML in the aspx page.
<div style="margin-top: 100px; margin-left: 300px; margin-bottom: 200px;">
      
<div>
            
<span>
                  
<asp:Image ID="imgA" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Aston_Martin-V12_Vantage_2010.jpg" />
            
</span>
            <
span>
                  
<asp:Image ID="imgB" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Seat-Altea_TDI_2005.jpg" />
            
</span>
            <
span>
                  
<asp:Image ID="imgC" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Honda-CR-Z_2011.jpg" />
            
</span>
      
</div>      <div>
            
<span>
                  
<asp:Image ID="imgD" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Hummer-H3_Alpha_2008.jpg" />
            </
span>
            
<span>
                  
<asp:Image ID="imgE" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Mercedes-Benz-SL63_AMG_2009.jpg" />
            </
span>
            
<span>
                  
<asp:Image ID="imgF" class="imgThNail" runat="server" Width="200px" Height="200px" ImageUrl="images/Suzuki-Swift.jpg" />
            </
span>
      
</div>
      
<div id="sourceDiv" style="display: none; border: Solid 1px White;">
      
</div></div>

Step 3: Place below script in the aspx page which will make all the images blurred on the page load. On mouseover the blurred imaged

$(document).ready(function() {
      //To make all the images blurred on page load
      
$('img.imgThNail').css('opacity', 0.4);

      
//Turn off the blur on mouseover
      
$("img.imgThNail").mouseover(function(e) {
            $(
this).css('opacity', 1);
      });

      //Turn on back the blur on mouseout
      
$("img.imgThNail").mouseout(function(e) {
            $(
this).css('opacity', 0.4);
      });

      document.onclick = check;
      
function check(e) {
            $(
"#sourceDiv").css({
                  display:
'none'
            
});
      }
});


Live Demo
Like us if you find this post useful. Thanks! 
Shibashish mohanty

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty