Change opacity of other images/linkbutton except the one selected
<p>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.</p>

<p>so far what i've found are mostly for <em>a href</em> and not <em>linkButton</em>.i'm very new to jQuery and i would really appreciate if anyone could help me here.</p>

<p>this is what i've found, i wanted the same except it is for linkButton:
<a href="http://jsfiddle.net/gCsRL/1/" rel="nofollow">http://jsfiddle.net/gCsRL/1/</a></p>

<p>when i try with the following code, i have no problem:</p>

<pre><code>&lt;a class="images"  href="#"&gt;&lt;img class="click" src="Images/Level2.jpg" height="133"/&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt;
</code></pre>

<p>but because i want a linkButton, i tried to add the <em>asp:linkButton</em> in, but is throwing me an error saying <strong>"Control 'lbl1' of type 'LinkButton' must be placed inside a form tag with runat=server."</strong> </p>

<pre><code>&lt;asp:LinkButton ID="lbl1" runat="server"&gt;&lt;a class="images"  href="#"&gt;&lt;img class="click" src="Images/Level1.jpg" height="133" /&gt;&lt;br/&gt;&lt;br/&gt;&lt;/a&gt;&lt;/asp:LinkButton&gt;
</code></pre>

<p>my script:</p>

<pre><code>&lt;script&gt;
$(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);
});

});
</code></pre>

<p></p>

<p>i don't understand!!! can any kind soul out there help me please!!</p>

<p>-----EDIT-----</p>

<p>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.</p>

<pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" CodeFile="fades_test.aspx.vb" Inherits="fades_test" %&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head runat="server"&gt;
&lt;title&gt;&lt;/title&gt;
&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;script&gt;
    $(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);
        });

    });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" runat="server"&gt;
&lt;div id="images" &gt;
    &lt;a class="images" href="#" runat="server" &gt;
        &lt;img class="click" src="Images/Level1.jpg" height="133" /&gt;&lt;br /&gt;
        &lt;br /&gt;
    &lt;/a&gt;
    &lt;a class="images" href="#" runat="server" id="img2"&gt;
        &lt;img class="click" src="Images/Level2.jpg" height="133" /&gt;&lt;br /&gt;
        &lt;br /&gt;
    &lt;/a&gt;
    &lt;a class="images" href="#" runat="server" id="img3"&gt;
        &lt;img class="click" src="Images/Level3.jpg" height="133" /&gt;&lt;br /&gt;
        &lt;br /&gt;
    &lt;/a&gt;&lt;/div&gt;

&lt;table&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;table id="tblLevel1" runat="server" visible="false" style="z-index: 100; left: 50px;
                position: relative; top: 0px;"&gt;
                &lt;tr&gt;
                    &lt;td colspan="2"&gt;
                        &lt;br /&gt;
                        &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 1 Quality Policy &amp; Quality Manual&lt;/b&gt;&lt;/font&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                ...
            &lt;/table&gt;
            &lt;table id="tblLevel2" runat="server" visible="false" width="650px" style="z-index: 100;
                left: 50px; position: relative; top: 0px;"&gt;
                &lt;tr&gt;
                    &lt;td colspan="2"&gt;
                        &lt;br /&gt;
                        &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 2 QMS Procedures&lt;/b&gt;&lt;/font&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
               ...
            &lt;/table&gt;
            &lt;table id="tblLevel3" runat="server" visible="false" width="650px" style="z-index: 100;
                left: 50px; position: relative; top: 0px;"&gt;
                &lt;tr&gt;
                    &lt;td colspan="2"&gt;
                        &lt;br /&gt;
                        &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 3 QMS Forms&lt;/b&gt;&lt;/font&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
                ...
            &lt;/table&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/form&gt;
</code></pre>

<p>
</p>

<p>the code behind:</p>

<pre><code> 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
</code></pre>

<p>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.</p>

<p><strong>----------------EDIT-------------------------</strong></p>

<p>i'm using Masterpage.master in this</p>

<pre><code>&lt;%@ Page Language="VB" AutoEventWireup="false" MasterPageFile="MasterPage.master" CodeFile="timg.aspx.vb" Inherits="timg" MaintainScrollPositionOnPostback="true"%&gt;


&lt;asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"&gt;
&lt;br /&gt;

&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;&lt;/title&gt;

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(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();
        });
    });
&lt;/script&gt;

        &lt;table width="100%"&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;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"&gt;
                &lt;param name="movie" value="SWF/ban_hse.swf" /&gt;
                &lt;param name="quality" value="autohigh" /&gt;
                &lt;param name="bgcolor" value="black" /&gt;
                &lt;param name="”menu”" value="”false”" /&gt;
                &lt;param name="FlashVars" value="”init=yes&amp;check=true”" /&gt;
                &lt;embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
                &lt;/embed&gt;
            &lt;/object&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;br /&gt;
            &lt;font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"&gt;&lt;b&gt;Quality
                Management System&lt;/b&gt;&lt;/font&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;br /&gt;
&lt;table width="100%"&gt;
    &lt;tr valign="top"&gt;
        &lt;td width="3%"&gt;&lt;/td&gt;
        &lt;td width="17%"&gt;
            &lt;div style="height: 35px"&gt;
                &lt;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"&gt;&lt;/asp:LinkButton&gt;&lt;/div&gt;
            &lt;div style="height: 35px"&gt;
                &lt;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"&gt;&lt;/asp:LinkButton&gt;&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
&lt;table width="100%"&gt;
    &lt;tr align="center"&gt;
        &lt;td colspan="2"&gt;
            &lt;br /&gt;
            &lt;strong&gt;SOC- ISO 9001:2008 Certificate &amp;nbsp;&amp;nbsp;(16th Sep 2009 to 31st Aug 2012)&lt;/strong&gt;&lt;br /&gt;
            Click &lt;a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"&gt;&lt;font
                color="blue"&gt;&lt;u&gt;here&lt;/u&gt;&lt;/font&gt;&lt;/a&gt;&amp;nbsp; to download
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;strong&gt;ISO 9001-2008(E) QMS Requirements&lt;/strong&gt;&lt;br /&gt;
            Click &lt;a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"&gt;&lt;font
                color="blue"&gt;&lt;u&gt;here&lt;/u&gt;&lt;/font&gt;&lt;/a&gt;&amp;nbsp; to download
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;div id="div1"&gt;
                &lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level1.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;&lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level2.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;&lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level3.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        &lt;table id="tblLevel1" runat="server" style="z-index: 100; left: 50px; position: relative;
                            top: 0px; display: none;"&gt;
                            &lt;tr&gt;
                                &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 1 Quality Policy &amp; Quality Manual&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                            &lt;/table&gt;

                        &lt;table id="tblLevel2" runat="server" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;"&gt;
                            &lt;tr&gt;
                                &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 2 QMS Procedures&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;
                             &lt;/table&gt;                         
                        &lt;table id="tblLevel3" runat="server" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;"&gt;
                            &lt;tr&gt;
                                &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 3 QMS Forms&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
                            &lt;/tr&gt;

                        &lt;/table&gt;
                    &lt;/td&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p></p>

<p><strong>----------Source Code------------</strong></p>

<p>
    </p>

<pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(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();
        });
    });
&lt;/script&gt;

    &lt;table width="100%"&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;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"&gt;
                &lt;param name="movie" value="SWF/ban_hse.swf" /&gt;
                &lt;param name="quality" value="autohigh" /&gt;
                &lt;param name="bgcolor" value="black" /&gt;
                &lt;param name="”menu”" value="”false”" /&gt;
                &lt;param name="FlashVars" value="”init=yes&amp;check=true”" /&gt;
                &lt;embed src="SWF/ban_hse.swf" width="1000px" height="238px" name="myMovieName" type="application/x-shockwave-flash"
                    pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;
                &lt;/embed&gt;
            &lt;/object&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;br /&gt;
            &lt;font color="CornflowerBlue" style="font-size: 16px; font-family: CG Omega;"&gt;&lt;b&gt;Quality
                Management System&lt;/b&gt;&lt;/font&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
&lt;/table&gt;
&lt;br /&gt;
&lt;table width="100%"&gt;
    &lt;tr valign="top"&gt;
        &lt;td width="3%"&gt;&lt;/td&gt;
        &lt;td width="17%"&gt;
            &lt;div style="height: 35px"&gt;
                &lt;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;"&gt;Quality Management System&lt;/a&gt;&lt;/div&gt;
            &lt;div style="height: 35px"&gt;
                &lt;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;"&gt;Monthly BE Articles&lt;/a&gt;&lt;/div&gt;
        &lt;/td&gt;
        &lt;td&gt;
&lt;table width="100%"&gt;
    &lt;tr align="center"&gt;
        &lt;td colspan="2"&gt;
            &lt;br /&gt;
            &lt;strong&gt;SOC- ISO 9001:2008 Certificate &amp;nbsp;&amp;nbsp;(16th Sep 2009 to 31st Aug 2012)&lt;/strong&gt;&lt;br /&gt;
            Click &lt;a href="HSE/QBE/Swiber_ISO 9001.2008 Certificate.pdf" target="_blank"&gt;&lt;font
                color="blue"&gt;&lt;u&gt;here&lt;/u&gt;&lt;/font&gt;&lt;/a&gt;&amp;nbsp; to download
            &lt;br /&gt;
            &lt;br /&gt;
            &lt;strong&gt;ISO 9001-2008(E) QMS Requirements&lt;/strong&gt;&lt;br /&gt;
            Click &lt;a href="HSE/QBE/ISO 9001-2008(E) QMS Requirements.pdf" target="_blank"&gt;&lt;font
                color="blue"&gt;&lt;u&gt;here&lt;/u&gt;&lt;/font&gt;&lt;/a&gt;&amp;nbsp; to download
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td align="center"&gt;
            &lt;div id="div1"&gt;
                &lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level1.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;&lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level2.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;&lt;a class="images" href="#"&gt;
                    &lt;img class="click" src="Images/Level3.jpg" alt="" border="0" /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                &lt;/a&gt;
            &lt;/div&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
        &lt;td&gt;
            &lt;table&gt;
                &lt;tr&gt;
                    &lt;td&gt;
                        &lt;table id="ctl00_ContentPlaceHolder1_tblLevel1" style="z-index: 100; left: 50px; position: relative;
                            top: 0px; display: none;"&gt;
&lt;tr&gt;
    &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 1 Quality Policy &amp; Quality Manual&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
   &lt;table id="ctl00_ContentPlaceHolder1_tblLevel2" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;"&gt;
&lt;tr&gt;
    &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 2 QMS Procedures&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

                        &lt;table id="ctl00_ContentPlaceHolder1_tblLevel3" width="650px" style="z-index: 100; left: 50px;
                            position: relative; top: 0px; display: none;"&gt;
&lt;tr&gt;
    &lt;td colspan="2"&gt;
                                    &lt;br /&gt;
                                    &lt;font color="gray" style="font-size: 16px;"&gt;&lt;b&gt;Level 3 QMS Forms&lt;/b&gt;&lt;/font&gt;
                                &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
</code></pre>
