Change opacity of other images/linkbutton except the one selected
I have 3 images which i included in a linkButton and 3 different tables which i've set the visibility to 'False'. Once i've clicked on the 1st image/linkButton, the other 2 images/link button's opacity will be change to a lighter one, and also my 1st table visiblity will be set to true. the same goes for the other 2 images/linkbutton.
so far what i've found are mostly for a href and not linkButton.i'm very new to jQuery and i would really appreciate if anyone could help me here.
this is what i've found, i wanted the same except it is for linkButton: http://jsfiddle.net/gCsRL/1/
when i try with the following code, i have no problem:
<a class="images" href="#"><img class="click" src="Images/Level2.jpg" height="133"/><br/><br/></a>
but because i want a linkButton, i tried to add the asp:linkButton in, but is throwing me an error saying "Control 'lbl1' of type 'LinkButton' must be placed inside a form tag with runat=server."
<asp:LinkButton ID="lbl1" runat="server"><a class="images" href="#"><img class="click" src="Images/Level1.jpg" height="133" /><br/><br/></a></asp:LinkButton>
my script:
<script>
$(document).ready(function() {
$('a.images').click(function() {
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
// Make this opaque
$(this).stop().animate({ opacity: 1.0 }, 300);
});
});
i don't understand!!! can any kind soul out there help me please!!
-----EDIT-----
Ok it turns out i really didn't put the runat in form. i tried using a href instead now but when i added an id to it, the animation is not working.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="fades_test.aspx.vb" Inherits="fades_test" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a.images').click(function() {
// Make all images (except this) transparent
$('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
// Make this opaque
$(this).stop().animate({ opacity: 1.0 }, 300);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="images" >
<a class="images" href="#" runat="server" >
<img class="click" src="Images/Level1.jpg" height="133" /><br />
<br />
</a>
<a class="images" href="#" runat="server" id="img2">
<img class="click" src="Images/Level2.jpg" height="133" /><br />
<br />
</a>
<a class="images" href="#" runat="server" id="img3">
<img class="click" src="Images/Level3.jpg" height="133" /><br />
<br />
</a></div>
<table>
<tr>
<td>
<table id="tblLevel1" runat="server" visible="false" style="z-index: 100; left: 50px;
position: relative; top: 0px;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
</td>
</tr>
...
</table>
<table id="tblLevel2" runat="server" visible="false" width="650px" style="z-index: 100;
left: 50px; position: relative; top: 0px;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
</td>
</tr>
...
</table>
<table id="tblLevel3" runat="server" visible="false" width="650px" style="z-index: 100;
left: 50px; position: relative; top: 0px;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
</td>
</tr>
...
</table>
</td>
</tr>
</table>
</form>
the code behind:
Protected Sub img1_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img1.ServerClick
tblLevel1.Visible = True
tblLevel2.Visible = False
tblLevel3.Visible = False
End Sub
Protected Sub img2_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img2.ServerClick
tblLevel1.Visible = False
tblLevel2.Visible = True
tblLevel3.Visible = False
End Sub
Protected Sub img3_ServerClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles img3.ServerClick
tblLevel1.Visible = False
tblLevel2.Visible = False
tblLevel3.Visible = True
End Sub
here inside my div id="images", the 1st image that is without an id, is working properly, meaning it fades out the other 2 images but it is not showing me tblLevel1!!. for the 2nd n 3rd image that has an id, is not fading the other images but it is showing me the respective tables.
----------------EDIT-------------------------
i'm using Masterpage.master in this
<%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="MasterPage.master" CodeFile="timg.aspx.vb" Inherits="timg" MaintainScrollPositionOnPostback="true"%>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.images').click(function() {
$('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
// Make this opaque
$(this).stop().animate({ opacity: 1.0 }, 300);
//hide all tables
$('[id*=tblLevel]').hide();
//show indexed tabled
$('#tblLevel' + ($(this).index() + 1)).show();
});
});
</script>
<table width="100%">
<tr>
<td align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0"
width="1000" height="238" id="myMovieName">
<param name="movie" value="SWF/ban_hse.swf" />
<param name="quality" value="autohigh" />
<param name="bgcolor" value="black" />
<param name="”menu”" value="”false”" />
<param name="FlashVars" value="”init=yes&check=true”" />
<embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</td>
</tr>
<tr>
<td align="center">
<br />
<font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"><b>Quality
Management System</b></font>
</td>
</tr>
</table>
<br />
<table width="100%">
<tr valign="top">
<td width="3%"></td>
<td width="17%">
<div style="height: 35px">
<asp:LinkButton ID="lblQMS" runat="server" Text="Quality Management System" ForeColor="gray"
Font-Bold="true" Font-Underline="false" Font-Names="CG Omega" Font-Size="16px"></asp:LinkButton></div>
<div style="height: 35px">
<asp:LinkButton ID="lblMBEA" runat="server" Text="Monthly BE Articles" ForeColor="gray"
Font-Bold="true" Font-Underline="false" Font-Names="CG Omega" Font-Size="16px"></asp:LinkButton></div>
</td>
<td>
<table width="100%">
<tr align="center">
<td colspan="2">
<br />
<strong>SOC- ISO 9001:2008 Certificate (16th Sep 2009 to 31st Aug 2012)</strong><br />
Click <a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"><font
color="blue"><u>here</u></font></a> to download
<br />
<br />
<strong>ISO 9001-2008(E) QMS Requirements</strong><br />
Click <a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"><font
color="blue"><u>here</u></font></a> to download
</td>
</tr>
<tr>
<td align="center">
<div id="div1">
<a class="images" href="#">
<img class="click" src="Images/Level1.jpg" alt="" border="0" />
<br />
<br />
</a><a class="images" href="#">
<img class="click" src="Images/Level2.jpg" alt="" border="0" />
<br />
<br />
</a><a class="images" href="#">
开发者_运维知识库 <img class="click" src="Images/Level3.jpg" alt="" border="0" />
<br />
<br />
</a>
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table id="tblLevel1" runat="server" style="z-index: 100; left: 50px; position: relative;
top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
</td>
</tr>
</table>
<table id="tblLevel2" runat="server" width="650px" style="z-index: 100; left: 50px;
position: relative; top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
</td>
</tr>
</table>
<table id="tblLevel3" runat="server" width="650px" style="z-index: 100; left: 50px;
position: relative; top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
----------Source Code------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.images').click(function() {
$('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
// Make this opaque
$(this).stop().animate({ opacity: 1.0 }, 300);
//hide all tables
$('[id*=tblLevel]').hide();
//show indexed tabled
$('#tblLevel' + ($(this).index() + 1)).show();
});
});
</script>
<table width="100%">
<tr>
<td align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,40,0"
width="1000" height="238" id="myMovieName">
<param name="movie" value="SWF/ban_hse.swf" />
<param name="quality" value="autohigh" />
<param name="bgcolor" value="black" />
<param name="”menu”" value="”false”" />
<param name="FlashVars" value="”init=yes&check=true”" />
<embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer">
</embed>
</object>
</td>
</tr>
<tr>
<td align="center">
<br />
<font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"><b>Quality
Management System</b></font>
</td>
</tr>
</table>
<br />
<table width="100%">
<tr valign="top">
<td width="3%"></td>
<td width="17%">
<div style="height: 35px">
<a id="ctl00_ContentPlaceHolder1_lblQMS" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lblQMS','')" style="color:Gray;font-family:CG Omega;font-size:16px;font-weight:bold;text-decoration:none;">Quality Management System</a></div>
<div style="height: 35px">
<a id="ctl00_ContentPlaceHolder1_lblMBEA" href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$lblMBEA','')" style="color:Gray;font-family:CG Omega;font-size:16px;font-weight:bold;text-decoration:none;">Monthly BE Articles</a></div>
</td>
<td>
<table width="100%">
<tr align="center">
<td colspan="2">
<br />
<strong>SOC- ISO 9001:2008 Certificate (16th Sep 2009 to 31st Aug 2012)</strong><br />
Click <a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"><font
color="blue"><u>here</u></font></a> to download
<br />
<br />
<strong>ISO 9001-2008(E) QMS Requirements</strong><br />
Click <a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"><font
color="blue"><u>here</u></font></a> to download
</td>
</tr>
<tr>
<td align="center">
<div id="div1">
<a class="images" href="#">
<img class="click" src="Images/Level1.jpg" alt="" border="0" />
<br />
<br />
</a><a class="images" href="#">
<img class="click" src="Images/Level2.jpg" alt="" border="0" />
<br />
<br />
</a><a class="images" href="#">
<img class="click" src="Images/Level3.jpg" alt="" border="0" />
<br />
<br />
</a>
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table id="ctl00_ContentPlaceHolder1_tblLevel1" style="z-index: 100; left: 50px; position: relative;
top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 1 Quality Policy & Quality Manual</b></font>
</td>
</tr>
</table>
<table id="ctl00_ContentPlaceHolder1_tblLevel2" width="650px" style="z-index: 100; left: 50px;
position: relative; top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 2 QMS Procedures</b></font>
</td>
</tr>
</table>
<table id="ctl00_ContentPlaceHolder1_tblLevel3" width="650px" style="z-index: 100; left: 50px;
position: relative; top: 0px; display: none;">
<tr>
<td colspan="2">
<br />
<font color="gray" style="font-size: 16px;"><b>Level 3 QMS Forms</b></font>
</td>
</tr>
</table>
If you're posting back only to make the tables visible or not then please view this updated fiddle:
http://jsfiddle.net/yjw3K/
Changes:
Visibility="false"- inside style tag:display:none;- Added code to show/hide tables on index.
If you still need to execute client code I would suggest looking into onClientClick which will execute client code and code behind code registered to the control.
*EDIT for clarity *
<script type="text/javascript">
var contentPlaceHolder = '#ctl00_ContentPlaceHolder1_';
$(document).ready(function(){
$('a.images').click(function() {
$('a.images').not(this).stop().animate({ opacity: 0.4 }, 300);
// Make this opaque
$(this).stop().animate({ opacity: 1.0 }, 300);
//hide all tables
$('[id*=tblLevel]').hide();
//show indexed tabled
$(contentPlaceHolder + 'tblLevel' + ($(this).index() + 1)).show();
});
});
</script>
加载中,请稍侯......
精彩评论