Jquery Change div background on mouseover in asp.net
In Asp.net jquery-change div background Image on mouseover:
In this Post we will Try to change a background of a div
when the user rollsovers it. We want to change font color of given div tag at
run time when go to mouse on div and then again change when mouse left the div
tag.
If you want to :
If you want to :
- change div text color on mouseover
- Watermark Text on uploaded Image
- change Opacity on Mouse over
- change Background color of DIV
Change background image on mouse hover with jQuery:
Use this script function in head section.
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$('div').hover(
function () {
$(this).css({ "background-image":
"url('image2.jpg')" });
},
function () {
$(this).css({ "background-image":
"url('image1.jpg')" });
}
);
});
</script>
jQuery background-image change on hover (css code):
<style>
.div
{
margin: 10px;
padding: 12px;
border: 2px solid #666;
width: 218px;
font-size: large;
}
.style1
{
color: #990000;
text-decoration: underline;
}
.style2
{
width: 874px;
}
.main
{
}
</style>
Asp.net -Change background on hover :
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="divExample.aspx.cs"
Inherits="divExample"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Jquery Change fount color</title>
<%--<script type="text/javascript"
src="https://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"></script>--%>
<script type="text/javascript"
src="Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
language="javascript">
$(document).ready(function () {
$('div').hover(
function () {
$(this).css({ "background-image":
"url('image2.jpg')" });
},
function () {
$(this).css({ "background-image":
"url('image1.jpg')" });
}
);
});
</script>
<style>
.div
{
margin: 10px;
padding: 12px;
border: 2px solid #666;
width: 218px;
font-size: large;
}
.style1
{
color: #990000;
text-decoration: underline;
}
.style2
{
width: 874px;
}
.main
{
}
</style>
</head>
<body>
<h1 class="style1">
Change bg Image of DIV using jQuery on move go to Image</h1>
<p>
Move mouse on any square below to see the result:</p>
<table>
<tr>
<td>
<div
class="div"
style="color: blue; background-image:
url('image1.jpg'); width: 200px;
height: 160px">
</div>
</td>
<td>
<div
class="div"
style="color: blue; background-image:
url('image1.jpg'); width: 200px;
height: 160px;">
</div>
</td>
<td>
<div
class="div"
style="color: blue; background-image:
url('image1.jpg'); width: 200px;
height: 160px">
</div>
</td>
</tr>
</table>
</body>
</html>
Asp.net Related Other Post:
- Use of view state.
- Events in asp.net
- Server control.
- Introduction of SQL
- Cloud Service Provider
- Post back And call back
- Session Management.
- Required Field validator.
- Create Data Table in SQL
- Cloud Service Introduction
- Control execution life cycle.
- Asp.net-user-control-basics.
- Show gridview Row Details.
- Templatefield in gridview
- Image size before Uploading.
- Example of session in asp.net
- compare validator in asp.net
- What is the postback in asp.net
- Asp.net Textbox OnTextChanged Event
- How to create master page in asp net c#
- Cookies, how to make Cookies in asp.net with C#.
- Example of DropDownList inside GridView
- Check box in ASP.NET GridView
- Ckeck box list example using javascript in grid.
- Check box in ASP.NET GridView
- Show grid view row details in to tooltip.
- How to Bind Gridview Form database.
- Show gridview Row Details And Give Example.
- Example of Templatefield in asp.net gridview.
- Example of DropDownList inside GridView control
- Introduction of Asp.net grid view Control.
- How to Bind Gridview Form database.
- Print pdf file in asp.net by C sharp
- Introduction of Asp.net grid view Control.
- Example of Templatefield in gridview .
- Validate ASP.Net RadioButtonList using JavaScript Example
- Upload multiple by one asp.net file upload control using jQuery
- Adding Dynamic Rows in ASP.Net GridView Control with Textbox
- Create Dynamic Rows in ASP.Net Grid View Control with Textboxes
- Example of C# for Bind Data to asp.net Textbox inside gridview control
- Bind Data to asp.net textbox control in inside of gridview Using C# Example
Comments
Post a Comment