Use jquery of change Opacity on Mouse over
Change Opacity of Image on Mouse over by Jquery:
In this Example we give a example in which explain how to
use css Opacity property. How to use Jquery for change Image opacity in asp.net
page.
In fallowing browser
- IE9,
- Firefox,
- Chrome,
- Opera,
And Safari uses the
property opacity for transparency. The opacity property can take a value from
0.0 - 1.0. A lower value makes the element more transparent.
But IE8 work as:
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
opacity: 0.4;
filter: alpha(opacity=40);
}
Jquery Example for change Image opacity:
Use jqery-1.8.2.js file.
For using this we
give a url here. http://code.jquery.com/jquery-1.8.2.js
JQuery Function for set opacity of image:
cript type="text/javascript">
$(function () {
$("#image1").css("opacity",
0.3);
$("#image1").hover(function
() {
$(this).animate({ opacity: 1.0 }, 500);
}, function () {
$(this).animate({ opacity: 0.3 }, 500);
});
})
Use this function within script tag in html page had
section:
Jquery in asp.net page Example:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="imageoptimizationExample.aspx.cs"
Inherits="imageoptimizationExample"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Change Image Opacity Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$("#image1").css("opacity",
0.3);
$("#image1").hover(function
() {
$(this).animate({ opacity: 1.0 }, 500);
}, function () {
$(this).animate({ opacity: 0.3 }, 500);
});
})
</script>
<style type="text/css">
#logoimage
{
height: 190px;
width: 303px;
}
</style>
</head>
<body>
<form id="form1">
<div align="center">
<h2>......Change Image Opacity on Mouse Over by JQuery...... </h2>
<div>
<img id="image1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTyi0wHhuS5rmEF1NzEABOu7rRCpH8J3XzyRbxrj82fE-19ygVVUw"
/>
</div></div>
</form>
</body>
</html>
Jquery Example Image opacity:
Other Jquery Related Examples:
- Asp.net CheckBoxList using jQuery.
- Cropping image using jQuery in asp.net
- Displaying the textbox value in javascript Messagebox
- Get selected radio button values using JQuery.
- How do you do html text encodes using JavaScript
- Limit Number of Characters in a TextArea using jQuery
- Limitation of Characters in Textbox or TextArea in asp.netusing jquery:
- jquery disable or Enable submit button after validation
- Enable Disable Submit Button using jQuery
- JQuery UI Datepicker (Calendar) with asp.net textbox
- Get current datetime in jquery and javaScript.
- jQuery modal dialog with postback in asp.net
Comments
Post a Comment