Expandable Banner on Mouse over

Question

I am currently working on a website, where my client asked me to place a Banner which expands on Mouse Over. Similar to this website ( http://www.londontown.com/majorcampaigns/ ). When we hover on LondonTown.com Banner it just expands and show rest of the Ad.

I tried my level best but i couldn't figure it out, Please help me.

Answer 1

For "Alice in Wonderland" purposes, I've defined two functions. This is humour! You only need one as you pass in the height.

I haven't "animated" the effect as your question was about expanding the division on hover - so this is a simple example.

<div style="z-index: 1; height: 30px;">
    <div style="position: absolute; overflow:hidden; z-index: 3000; width: 500px; height: 30px; background-color: Aqua;" onmouseover="eatMe(this, 200);" onmouseout="drinkMe(this, 30);">
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

<script type="text/javascript">
var eatMe = function(elem, height) {
    elem.style.height = height + "px";
};

var drinkMe = function(elem, height) {
    elem.style.height = height + "px";
};
</script>

Answer 2

You can create a banner like that in Flash with a transparent area and wmode=transparent.

At first (without hover) the banner is, let's say, 250px width. When you hover it, it expands to 500px width. It looks like the SWF is growing, but in fact it lays on top of the site with a transparent background.

Answer 3

This is really simple with jQuery. If you want an animating effect, take a look at http://api.jquery.com/slideDown/

slideDown lets you manipulate the height of DOM-elemets in a smooth animating way.

Good luck.

Answer 4

You could use .animate() function on .hover() of the element.

I modified Sohnee's code a bit with jQuery.

with his html:

   <div style="z-index: 1; height: 300px; width:300px;background-color: blue;" >
    <div class='block' style="position: absolute; overflow:hidden; z-index: 3000; width: 200px; height:200px; background-color: Aqua;">
      <p class='banner' style='display:none'>I'm a banner that goes out when I needed to.</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
        <p>Lorum ipsum delorum etc</p>
    </div>
   </div>

<p>More text here</p>

and here's a the jQuery:

$(".block").hover(function(){
  $(this).animate({"width": "350px"}, 1000);
  $('p.banner').toggle('slow');
},function(){
  $(this).animate({"width": "190px"}, 500);
  $('p.banner').toggle('slow');
});​

here's a working demo.
please look at hover and animate for better understanding.

Answer 5

the example you showed is done using flash. the stage size of the main movie should be equal to the 'expanded' size of the banner. there are many ways to do this, i'll try and explain one.

you put one looping movieclip on the 1st frame with a stop(); command. this movieclip shows the banner in the non-expanded state. then you put a invisible button over the entire stage and put the following actionscript on the invisible button

button.rollOver = function() {
 gotoAndPlay (2);
}

so the movie goes and plays from frame 2, which shows the 'expanding' animation. you can use a rollout function to return to the 1st frame.

ofcourse, the flash movie needs to be set to wmode=transparent when it is embedded into an HTML file. hope this helps

Answer 6

Check out http://www.expandablebanners.com

This Media Kit is the best and last solution you will ever need to create your own Expandable Banners.

All you need to do is change 3 things: 1. Change the location of your banner files. 2. Your banners dimensions. 3. The direction it will expand to. (up, down, left, right, center)

Your Done.