asked on

Expandable banner pt2

Ok, so I have this banner which is expanding once clicked and shrinks back one the mouse has disappeared.

I've go stuck trying to allow the user to click on the expanded image and be taken to a seprate URL.

I tried putting an onclick command after the shrinkbanner() command, however this then applies to whenever any click occurs - I need there to be two clicks for the user to be taken to the destination - the first to expand the banner - the second to clickthrough.

Thanks

<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").className='expanded';
}

function ShrinkBanner()
{
   document.getElementById("banner").className='expandable';
}
function Clickthru()
 {  
    parent.location='http://www.radissonblu.com/shortbreaks';
 }
</script>

</head>

<body>
<span class="expandable" id="banner" onClick="GrowBanner();" onMouseout="ShrinkBanner();"> </span>
</body>

</html>

Open in new window

ASKER CERTIFIED SOLUTION

jmgst116

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

eezar21

ASKER

Great thankyou from a complete beginner