Banner that expands on rollover?

[rexusdiablos]

I have an advert banner in the header of my web page. When the end-user rolls over it I want it to expand/drop-down to display further information about the advert. This is commonplace in rich-media adverts but I can't find any tutorials or resources to get me started.

Here's an example of the effect: http://www.e-planning.net/products/admagic/formats/rollover_expandable_video_banner.html

Here's an image of what I'm trying to achieve:

What's the best way to acheive this? Jquery? Flash? Ajax?

Any links would be greatly appreciated.

 

[LouTheDesigner]

jQuery would work just fine.

I prefer to use the ddlevelsmenu.js, which you can find here:

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

-Lou

 

[bcee]

JQ will do but you can do this with simple CSS.

#element #stuff-to-show {
display: none;
}
#element:hover #stuff-to-show {
display: block;
}

Obviously this is just an example not complete code.

 

[PixelPusher]

If you just want the expanded area visible while the cursor is hovering over it, then all you will only need CSS (use the :hover psuedo class)

If you want it to stay expanded even if the cursor is no longer hovering over the element, then that will take javascript. JQuery would be great here. Flash would also work, but its not my first choice.

 

[rexusdiablos]

jQuery would work just fine.

I prefer to use the ddlevelsmenu.js, which you can find here:

http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/index.htm

-Lou

Thanks. I'll delve through the code and review it.

JQ will do but you can do this with simple CSS.

#element #stuff-to-show {
display: none;
}
#element:hover #stuff-to-show {
display: block;
}

Obviously this is just an example not complete code.

If you just want the expanded area visible while the cursor is hovering over it, then all you will only need CSS (use the :hover psuedo class)

If you want it to stay expanded even if the cursor is no longer hovering over the element, then that will take javascript. JQuery would be great here. Flash would also work, but its not my first choice.

Yeah, in terms of the staying expanded without the hover it sounds like I'll need jquery so best to use it altogether methinks.

I was hoping to find specific tutorials and resources. Rich media expanding banners are commonplace. Perhaps they're all using different approaches and not sharing the wisdom.