<oops> Missed the part about top left. Apply the below to your icons. I'm "pretty sure" this is what people meant when they told you this anyway.
---------------
You mean the big header image at the top? Javascript is not needed. Create two image states in one image, like
this is the normal state part
-----------------------------
this is the mouse rollover part
Structure your html like this.
<div id="logo">
<p id="the-logo"><a href="/forums" title= "enter Forums">Enter Forums</a></p>
<div class="float_right"> (etc.) </div>
</div>
Your image display area is 750 X 140, so this image will be 750 X 280. The containing anchor will only be 140 px high, so only the upper half will display on mousout. Structure it so the mouseover the background moves to the rollover state.
/* outline none for the negative text-indent below */
#the-logo, #the-logo a { width: 750px; height:140px; display: block; margin:0; padding:0; outline:none; }
#the-logo { float: left; } /* may not be needed */
#the-logo a { background: url(/pathto/yourimage.jpg) top left no-repeat; text-indent:-50000px; }
#the-logo a:hover { background-position: bottom left; }
Or, if I've misunderstood, there are some good simple tooltip scripts out there, seems like a lot of work for something you can do in CSS.
