Introduction:
In this article,i am going to explain how to change the image opacity on image mouseover using jquery.
Main:
In this article i used google api(http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js) for demonstrating purpose,
You can download this api in google website,
Sample Code,try with yours own images
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Change Image Opacity on Hover</title>
<style type="text/css">
.MouseOver
{
height:250px;
width:250px;
opacity:0.3;
filter:alpha(opacity=30);
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$('.MouseOver').each(function() {
$(this).hover(
function() {
$(this).stop().animate({ opacity: 1.0 }, 800);
},
function() {
$(this).stop().animate({ opacity: 0.3 }, 800);
})
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>Hover over an Image to change its Transparency level</h2>
<br />
<asp:Image ID="Image1" runat="server"
ImageUrl="Images/Sample1.jpg" class="MouseOver" />
<asp:Image ID="Image2" runat="server"
ImageUrl="Images/Sample2.jpg" class="MouseOver" />
<asp:Image ID="Image3" runat="server"
ImageUrl="Images/Sample3.jpg" class="MouseOver" />
<asp:Image ID="Image4" runat="server"
ImageUrl="Images/Sample4.jpg" class="MouseOver" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>Change Image Opacity on Hover</title> <style type="text/css"> .MouseOver { height:250px; width:250px; opacity:0.3; filter:alpha(opacity=30); } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script> <script type="text/javascript"> $(function() { $('.MouseOver').each(function() { $(this).hover( function() { $(this).stop().animate({ opacity: 1.0 }, 800); }, function() { $(this).stop().animate({ opacity: 0.3 }, 800); }) }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <h2>Hover over an Image to change its Transparency level</h2> <br /> <asp:Image ID="Image1" runat="server" ImageUrl="Images/Sample1.jpg" class="MouseOver" /> <asp:Image ID="Image2" runat="server" ImageUrl="Images/Sample2.jpg" class="MouseOver" /> <asp:Image ID="Image3" runat="server" ImageUrl="Images/Sample3.jpg" class="MouseOver" /> <asp:Image ID="Image4" runat="server" ImageUrl="Images/Sample4.jpg" class="MouseOver" /> </div> </form> </body> </html> |
Conclusion:
Hope this helps,
Happy Coding.
Hey this is a great post. I’m going to email this to my friends. I stumbled on this while googling for some freebies, I’ll be sure to visit regularly. thanks for sharing.
I found this post while looking for some free downloads. Thanks for sharing will come back regularly and will email this post to my all my friends.
great post as usual!
Thanks for the simple solution. it saved me a lot of time.