Im very new to the wonder that is jquery.

and i just figure out how to make my img buttons show/hide with a opacity difference (as such)

 <script type="text/javascript"> 
 <![CDATA[
 $(".ExcommKnap").mouseover(function () { $(this).stop().fadeTo('fast', 0.5, function(){}) });
 $(".ExcommKnap").mouseout(function () { $(this).stop().fadeTo('fast', 1.0, function(){}) });
 ]]>
 </script>

which is good and all. but i also need to make the button when hovered over show text just above it that is specific to that button.

i made these here elements that are looped in a for each.

<div style="top:10px; width:755px;text-align:right; position:absolute; ">
    <div id="Page-{@id}" class="headlinebox">
        <xsl:value-of select="@nodeName"/>
    </div>
</div>  
<a href="{umbraco.library:NiceUrl(@id)}">
   <img class="ExcommKnap" src="{$media/data[@alias='umbracoFile']}" />                
</a>

i need to make the individual text appear when hovered over its button. hence i have the id="page-{@id}" looped out along and need to get this place in the jquery code i presume. so when i hover over a img class="ExcommKnap" it makes the correct text visible.

But i need the div id="page-{id}" to be invisible to begin with on pageload and then visible when its button is being hovered over. can anyone help ?