This short article demonstrates how to change the opacity of an image when the user hovers the mouse over an image. This article is a sample chapter from my EBook called 51 Tips, Tricks and Recipes with jQuery and ASP.NET Controls. The chapter has been modified a little to publish it as an article.
Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.
Let us quickly jump to the solution and see how we can change the opacity of an image.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Change Image Opacity on Hovertitle>
<style type="text/css">
.imgOpa
{
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() {
$('.imgOpa').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/1.jpg" class="imgOpa" />
<asp:Image ID="Image2" runat="server"
ImageUrl="../images/2.jpg" class="imgOpa" />
<asp:Image ID="Image3" runat="server"
ImageUrl="../images/3.jpg" class="imgOpa" />
<asp:Image ID="Image4" runat="server"
ImageUrl="../images/4.jpg" class="imgOpa" />
<div>
<form>
<body>
<html>
In this example, observe that the images have a class attribute ‘imgOpa’. The definition of the CSS class is as shown here:
.imgOpa
{
height:250px;
width:250px;
opacity:0.3;
filter:alpha(opacity=30);
}
When the images are loaded, they are in a semitransparent state. In Firefox, Chrome and Safari, we use the opacity:n property for transparency. The opacity value can be from 0.0 - 1.0, where a lower value makes the element more transparent.
In IE 7 and later, we use filter:alpha(opacity=n) property for transparency, where the opacity value can be from 0-100.
When the user hovers the mouse over a semitransparent image, we use the jQuery hover() method to animate the opacity property from 0.3 to 1.0, thereby creating a cool effect on the images. The code to achieve this effect is shown below:
$(this).hover(
function() {
$(this).stop().animate({ opacity: 1.0 }, 800);
},
function() {
$(this).stop().animate({ opacity: 0.3 }, 800);
})
});
No comments:
Post a Comment