Click to See Complete Forum and Search --> : Help with onfocus


rdmusc
10-09-2003, 12:26 PM
Need help with want I think is the onFocus command. Please go here and tab a few times to focus on one of the line items:

http://rd_musc.tripod.com/on_demand/olol_main.html

What I am trying to do is to change the text to the left of the item selected depending on what is selected. The text (Learn more about...) is now part of the background image, but I will convert to text when I can figure out how to change the text depending on what link has focus.

(links do not presently work)

Thanks...

David Harrison
10-09-2003, 12:52 PM
There are two ways in which you could do this, CSS or JavaScript.

The CSS way is probably better as more people will see the effect. I would be happy to provide a script to show examples of both.

To use JavaScript you would need the onmouseover event handler, and to use CSS you would need a:hover div{display:block}

rdmusc
10-09-2003, 12:58 PM
Thanks a lot!!! Let's try the css route because I am new to this and am a little intimidated by javascript. Any code sample would be appreciated. I've toy'd around with css a little.

David Harrison
10-09-2003, 01:05 PM
OK, I'll see what I can come up with, in the meantime why not check out an example of it here (http://www.meyerweb.com/eric/css/edge/popups/demo.html).

rdmusc
10-09-2003, 01:31 PM
One thing I neglected to mention. This is a special application where there is keyboard control only - no mouse. What has to happen on my above link -http://rd_musc.tripod.com/on_demand/olol_main.html - is for different text to display depending on what link/item is highlighted with the tab key or what I am assuming is the 'focus'. Not sure of my terminology due to being new at this. As I tab or shift-tab to highlight a different link, the text to the left changes. In other words, if Entertainment item is highlighted, I would like the text to the left to say something about Entertainment. If Health Information is highlighted, the text to say something different.

Thanks.....

David Harrison
10-09-2003, 02:33 PM
For that you would replace this line:

div#links a:hover span {display: block;

with this:

div#links a:focus span, div#links a:hover span {display: block;

rdmusc
10-09-2003, 02:37 PM
Appreciate it much. Will give it a shot.