How to show text/info in certain place on textover using javascript

Question

http://www.baelkopat.com/GECCo/goingGreenTest.html what I have so far.What I need to learn is to show the additional text when user mouseOver the link. i.e. when user mouseOver on "Activity Guide(PDF)" the "Download and print...." shows up... I have pretty good experience with actionscrip not that very new to javascript... I was wonde who to make the mouse over effet happen...

The hover div is crated using css

overTextA{

position:absolute;
left:190px;
top:7px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

overTextB{

position:absolute;
left:190px;
top:40px;
width:280px;
padding:10px 15px;
background-image:url(../images/navMenuOver.png);
background-repeat:no-repeat;
z-index:3;

}

and in HTML

<div id="overTextA"> Download and print a PDF-version of the Junior <i>Going Green with GECCo</i> guide, with activity information, instructions, and resources. </div>

<div id="overTextB"> Take the <i>GECCo Challenge !</i> Help our planet by saving energy AND earning money for conservation.</div>

I am not sure that is the best way to do it but for now I just want to have a workable version working that shows the appropriate text when mouseover on the nav link....

Thanks,Rex

Answer 1

You could achieve this in a straight forward fashion using a library like jQuery. Here is a tutorial that will walk you through using a .hover() function:

http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything

Clarification:

Add / remove your classes to the hover element, adding would display it, and removing or hiding it would take the text element away. jQuery is very useful when you don't want to dive into JS too much. Hope that helps!