mouse over popup menu

Question

Creating a website using simple html(not html5) and css but got stock in mouseover effect. Need to show some text with background image when user mouseover a link. Following is an example..

NORMAL:

OVER:

I don't think it is possible to create the effect with simple CSS. My question is what is the most effective way to create the over effect and how? Javascript, DHTML or other language...

Thanks in advance...Rex...

Answer 1

You can use javascript to show a hidden div which is having text written inside it.

use javascript's onmouseover and onmouseout events to do this.

However have you tried using href:hover property of css to achieve this?

Answer 2

Rex,

I think you would find jQuery very useful. jQuery is a javascript framework, very easy to use. www.jquery.com

You can achieve your effect with pure javascript, but again I think you will find using a javascript framework much easier, since your coming from actionscript.

For your particular instance I would make a div absolutely positioned. To show the div on mouseover you can use the jQuery $("#div_id").show(); and on mouseout use .hide();

Here is a basic tutorial for using show hide on events with jQuery.

http://www.learningjquery.com/2006/09/slicker-show-and-hide

Good luck!