many time it happens that when we are hiding or showing the grid at the same time we are changing the image direction, on that case we need to change the src of image control on clicking on the image;
You just need to take the reference of Jquery js file into your application or page;
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
@Code to toggle the image src in jquery
<script type="text/javascript">
//Check box checked
$(document).ready(function () {
$("#arrow").click(function () {
if ($('img[alt="top"]').attr('src') == "left.png")
$('#arrow').attr('src', "up.png");
else
$('#arrow').attr('src', "left.png");
});
});
</script>
@ASP.net code for image control
img src="left.png" alt="top" id="arrow" />
@Full code to change the image SRC on click
<head runat="server">
<title>Change Image src </title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
//Check box checked
$(document).ready(function () {
$("#arrow").click(function () {
if ($('img[alt="top"]').attr('src') == "left.png")
$('#arrow').attr('src', "up.png"); // take any image 1
else
$('#arrow').attr('src', "left.png"); // take any image 2
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table width="60%" align="center">
<tr>
<td colspan="2" align="center">
<h1>
Check box test</h1>
</td>
</tr>
<tr>
<td align="right">
</td>
<td align="left">
<img src="left.png" alt="top" id="arrow" />
<br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
@Out put;
On click into image it change image
No comments:
Post a Comment