Increase Banner Advert height onmouseover

Seth Brundle

Simple Q but Im too tired to think straight.
Although imposing a size rule of 468*60, one of my advertisers wants his advert which is 468*120.
What I want is to effectively hide the bottom 60 pixels of the advert until a mouse moves over the advert and then the whole lot is revealed.
I presume this is possibe with DIVs and its z-index.
However, if the DIV is inside a table cell will it always stay in the same place or will it increase the height of the table?
Is there any example code snippets out there?

louie

that should do it

<style type="text/css">
.named_div_small{width:460px; height:60px; border:1px solid #000;}
.named_div {width:460px; height:120px; border:1px solid #000;}
</style>


<div class="named_div_small" onmouseover="this.className='named_div'" onmouseout="this.className='named_div_small'">
some text ord banner here
</div>

Seth Brundle

Thanks.
Unfortunatley, the image still appears in full all the time

louie

set the image as background of the div itself.

<style type="text/css">
.named_div_small{width:460px; height:60px; border:1px solid #000; background-image:"path to the image"; background-repeat:no-repeat;}
.named_div {width:460px; height:120px; border:1px solid #000;background-image:"path to the image"; background-repeat:no-repeat;}
</style>

Seth Brundle

thanks louie.
the css BG property needs changing to
background-image:url('path to the image')
However, the DIV 'jumps' when it increases - the way the page is designed means that it moves upwards. Using z-index means that the div needs to have an absolute position which i guess doesn't suit.
What I want is something like the advert at the top of this page dropping down so that it covers whatever is behind it (with this page it would be the 'welcome NNN' bit)

louie

You will be better off looking at a floatting div which will have no effect on the page whatsoever, or iFrame

Seth Brundle

Yeah - that was in the back of my mind.
I'll probably just tell them to adjust the pic to 468*60
Thanks for all the help.