Expandable banner

Hi all,

I am trying to create a banner that expands with javascript and html5 - I can get the banner to expand, however the original image remains - I need this to disappear when the image expands.

Secondly, this is for a mobile device so ideally rather than a mouseover I need the user to be able to  drag the expanded image down and then insert a click through url (which I think I can do.

Sorry this sound like a lot, but I think I just need pointing in the right direction
<html>
<head>

<style type="text/css">
.expandable
{
   position:absolute;
   left: 0;
   top: 0;
   width: 300;
   height: 50;
   background-image: url("http://www.clickbrokers.net/ad/001.gif");
   z-index:2;
   visibility:visible;
}
.expanded
{
   position:absolute;
   left: 0;
   top: 0;
   width: 300;
   height: 250;
   background-image: url("http://www.clickbrokers.net/ad/002.jpg");
   z-index:2;
   visibility:visible;
}
</style>

<script language="JavaScript">
function GrowBanner()
{
   document.getElementById("banner").style.height = 250;
}

function ShrinkBanner()
{
   document.getElementById("banner").style.height = 50;
}
</script>

</head>

<body>
 <span class="expanded" id="banner">Move mouse pointer over banner</span>
 <span class="expandable" id="exbanner" onMouseover="GrowBanner();" onMouseout="ShrinkBanner()"> Move mouse pointer over banner</span>
</body>

</html>

Open in new window

eezar21Asked:
Who is Participating?
 
COBOLdinosaurCommented:
You need to change the function, so that you change the class, not just the height:

function GrowBanner()
{
   document.getElementById("banner").className='expanded';
}

function ShrinkBanner()
{
   document.getElementById("banner").className='expandable';
}

Open in new window

0
 
eezar21Author Commented:
Doh! - thanks very much - me missing the bleeding obvious

Any idea what the command would be for a touch screen device, so that rather than mouseover a user can drag down the expanded image?
0
 
eezar21Author Commented:
Perfect - thankyou very much
0
 
COBOLdinosaurCommented:
Any idea what the command would be for a touch screen device, so that rather than mouseover a user can drag down the expanded image?

Sorry I am an old dinosaur that still works with a mouse on a laptop, and most of the time I avoid anything smaller than a 14 inch screen. :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.