HTML / CSS - Banner chiudibile

Ciao ragazzi
Ho creato un banner pubblicitario che segue lo spostamento delle pagina e vorrei poterlo chiudere con un bottone.

Questo è il codice del mio banner

<!--Banner-->
<div id="divStayTopLeft" style="position:absolute">

<table border="1" width="180" cellspacing="0" cellpadding="0" >
<tr>
<td width="100%" bgcolor="#ffffcc" align="center">
<p align="center"><b><a href="pagina.html" style="text-decoration: none" ><h1><blink>Clicca qui per visitare il mio sito internet!!!</blink><h1></a>
<input type="button" onclick="self.close()" value="Chiudi" align="right"/>
     </b></td>
</tr>
</table>
</div>
<script type="text/javascript">

var verticalpos="fromtop"

function JSFX_FloatTopDiv()
{
    var startX = 10,
    startY = 250;
    var ns = (navigator.appName.indexOf("Netscape" != -1);
    var d = document;
    function ml(id)
    {
        var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id];
        if(d.layers)el.style=el;
        el.sP=function(x,y){this.style.left=x;this.style.top=y;};
        el.x = startX;
        if (verticalpos=="fromtop"
        el.y = startY;
        else{
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        el.y -= startY;
        }
        return el;
    }
    window.stayTopLeft=function()
    {
        if (verticalpos=="fromtop"{
        var pY = ns ? pageYOffset : document.body.scrollTop;
        ftlObj.y += (pY + startY - ftlObj.y)/8;
        }
        else{
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
        ftlObj.y += (pY - startY - ftlObj.y)/8;
        }
        ftlObj.sP(ftlObj.x, ftlObj.y);
        setTimeout("stayTopLeft()", 10);
    }
    ftlObj = ml("divStayTopLeft";
    stayTopLeft();
}
JSFX_FloatTopDiv();
// end -->
</script>


Il bottone che ho creato non produce nessun effetto
Avete qualche idea?
Grazie in anticipo

credo che basti mettere nell'evento on click la width del div uguale a 0. così si chiude

Come faccio a ridimensionare il div con l'evento onclick?

document.getelementbyid('id del tuo div').style.width = 0

Mmmm.....
Non funziona

ecco il codice completo. Te l'ho corretto.

<!--Banner--> 
<div id="divStayTopLeft" style="position:absolute; overflow: hidden;"> 

<table border="1" width="180" cellspacing="0" cellpadding="0" > 
  <tr> 
    <td width="100%" bgcolor="#ffffcc" align="center"> 
      <p align="center"><b><a href="pagina.html" style="text-decoration: none" ><h1><blink>Clicca qui per visitare il mio sito internet!!!</blink><h1></a> 
          <input type="button" onclick="document.getElementById('divStayTopLeft').style.width='0px'" value="Chiudi" align="right"> 
      </b></td> 
  </tr> 
</table> 
</div> 
<script type="text/javascript"> 

var verticalpos="fromtop" 

function JSFX_FloatTopDiv() 
{ 
    var startX = 10, 
    startY = 250; 
    var ns = (navigator.appName.indexOf("Netscape") != -1); 
    var d = document; 
    function ml(id) 
    { 
        var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id]; 
        if(d.layers)el.style=el; 
        el.sP=function(x,y){this.style.left=x;this.style.top=y;}; 
        el.x = startX; 
        if (verticalpos=="fromtop") 
        el.y = startY; 
        else{ 
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 
        el.y -= startY; 
        } 
        return el; 
    } 
    window.stayTopLeft=function() 
    { 
        if (verticalpos=="fromtop"){ 
        var pY = ns ? pageYOffset : document.body.scrollTop; 
        ftlObj.y += (pY + startY - ftlObj.y)/8; 
        } 
        else{ 
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 
        ftlObj.y += (pY - startY - ftlObj.y)/8; 
        } 
        ftlObj.sP(ftlObj.x, ftlObj.y); 
        setTimeout("stayTopLeft()", 10); 
    } 
    ftlObj = ml("divStayTopLeft"); 
    stayTopLeft(); 
} 
JSFX_FloatTopDiv(); 
// end  --> 
</script> 

ecco il codice completo. Te l'ho corretto.

<!--Banner--> 
<div id="divStayTopLeft" style="position:absolute; overflow: hidden;"> 

<table border="1" width="180" cellspacing="0" cellpadding="0" > 
  <tr> 
    <td width="100%" bgcolor="#ffffcc" align="center"> 
      <p align="center"><b><a href="pagina.html" style="text-decoration: none" ><h1><blink>Clicca qui per visitare il mio sito internet!!!</blink><h1></a> 
          <input type="button" onclick="document.getElementById('divStayTopLeft').style.width='0px'" value="Chiudi" align="right"> 
      </b></td> 
  </tr> 
</table> 
</div> 
<script type="text/javascript"> 

var verticalpos="fromtop" 

function JSFX_FloatTopDiv() 
{ 
    var startX = 10, 
    startY = 250; 
    var ns = (navigator.appName.indexOf("Netscape") != -1); 
    var d = document; 
    function ml(id) 
    { 
        var el=d.getElementById?d.getElementById(id).all?d.all[id].layers[id]; 
        if(d.layers)el.style=el; 
        el.sP=function(x,y){this.style.left=x;this.style.top=y;}; 
        el.x = startX; 
        if (verticalpos=="fromtop") 
        el.y = startY; 
        else{ 
        el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 
        el.y -= startY; 
        } 
        return el; 
    } 
    window.stayTopLeft=function() 
    { 
        if (verticalpos=="fromtop"){ 
        var pY = ns ? pageYOffset : document.body.scrollTop; 
        ftlObj.y += (pY + startY - ftlObj.y)/8; 
        } 
        else{ 
        var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight; 
        ftlObj.y += (pY - startY - ftlObj.y)/8; 
        } 
        ftlObj.sP(ftlObj.x, ftlObj.y); 
        setTimeout("stayTopLeft()", 10); 
    } 
    ftlObj = ml("divStayTopLeft"); 
    stayTopLeft(); 
} 
JSFX_FloatTopDiv(); 
// end  --> 
</script> 

ma impostare la proprietà css display a hidden non era più semplice?