Banner that expands on rollover?

[webmaster1]

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.

[.josh]

Personally I use jQuery for stuff like this, using .hover() and .slideUp() and .slideDown().

 

quick example code:

 

<script type='text/javascript' src='jquery.js'></script>

<div id='banner_main'>
  <img src='banner.jpg' />
  <div id='banner_more_info'>extra info here</div>
</div>

<script type='text/javascript'>
// initially hide the extra banner content...or initially hide it somewhere else or whatever
$("#banner_main #banner_more_info").hide();

// when user hovers over banner...
$("#banner_main").hover(
  // onmouseover, slide down info
  function() {
    $(this).find('#banner_more_info').slideDown(350);
  }, 
  // onmousout, slideup 
  function(){
    $(this).find('#banner_more_info').slideUp(350);
  }
);
</script>

 

edited to clarify some of the code

[webmaster1]

Thanks Crayon; jquery it is then. I wasn't expecting any code so double thanks for the skeleton you've provided. Now I know what functions I need to familiarize myself with.