hover opacity and click opacity
<p>I have some image links that change opacity on rollover with jquery. I want to also change the opacity of the "inactive" images when they are clicked and remove the active class of the previous image. Perhaps some code to demonstrate:</p>

<p>html:</p>

<pre><code>&lt;div style="width:940px; text-align:center; padding-bottom:10px;"&gt;
    &lt;a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "adI8ZRzjnlE");'&gt;
        &lt;img class="active"  src="images/video_thumbs/003.jpg" width="300" height="167" alt="La Vie en Couleur"&gt;
    &lt;/a&gt;
    &lt;a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "5L1vrwEvP-c");'&gt;
        &lt;img class="inactive" src="images/video_thumbs/001.jpg" width="300" height="167" alt="A Holiday Video"&gt;
    &lt;/a&gt;
    &lt;a href="#" class="nobase" onClick='jQuery("#youtube-player-container").tubeplayer("play", "ijfgzId6jdI");'&gt;
        &lt;img class="inactive"   src="images/video_thumbs/002.jpg" width="300" height="167" alt="La Vie en Couleur"&gt;
    &lt;/a&gt;
&lt;/div&gt; 
</code></pre>

<p>Jquery</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $("img.inactive").hover(function() {
            $(this).stop().animate({
                "opacity": "1"
            }, "slow");
        }, function() {
            $(this).stop().animate({
                "opacity": "0.6"
            }, "slow");
        });
    });
&lt;/script&gt;
</code></pre>

<p>css:</p>

<pre><code>.inactive {opacity:0.6;}
.active {opacity:1.0;}
</code></pre>

<p>so basically it is doing what I want on rollover, but I want to switch the active class on click as well.</p>
