Jump to content

Banner that expands on rollover?


Recommended Posts

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.

Link to comment
Share on other sites

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>

<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...
  // onmouseover, slide down info
  function() {
  // onmousout, slideup 


edited to clarify some of the code

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.