element som udvider sig

<html>
<head>
<script language="javascript" type="text/javascript">
function init(){
    document.getElementById('overlay_body').style.height = '200px';
    document.getElementById('overlay_body').style.width = '200px';
}

function expand(e) {
    if ((parseInt(e.style.width)<500) && (parseInt(e.style.height)<500)) {
        e.style.width = (parseInt(e.style.width)+10)+'px';
        e.style.height = (parseInt(e.style.height)+10)+'px';
        setTimeout('expand(document.getElementById("'+e.id+'"))', 10);
    }
}
</script>

</head>
<body onload="init(); return true;">
<table border="1">
<tr><td id="overlay_body" onclick="expand(this); return true;">Click to Expand</td>
</tr>
</table>
</body>
</html>

<html>
<head>
<script language="javascript" type="text/javascript">
function expand(id, h, w) {
    var e=document.getElementById(id);
    if (parseInt(e.style.height)<h)    e.style.height    = (parseInt(e.style.height)+1)+'px';
    if (parseInt(e.style.width)<w)    e.style.width     = (parseInt(e.style.width)+1)+'px';
    if ((parseInt(e.style.height)<h) || (parseInt(e.style.width)<w)) setTimeout('expand("'+id+'",'+h+','+w+')', 1);
}

function newButton(id) {
        var e=document.getElementById(id);
        var i = 0;
        while (document.getElementById('newButton_' + ++i ) );
        var newButton = document.createElement('button');
        newButton.id = 'newButton_' + i;
        newButton.appendChild( document.createTextNode('I am new and my id is ' + newButton.id) );
        e.appendChild(document.createElement('br'));
        e.appendChild(newButton);
        var w = newButton.offsetWidth;
        var h = newButton.offsetHeight;
        newButton.style.height='1px';
        newButton.style.width='1px';
          setTimeout('expand("' + newButton.id + '",'+h+','+w+')', 1);
}
window.onload = function(){
    document.getElementById('mainDiv').style.height = '200px';
    document.getElementById('mainDiv').style.width = '350px';
}
</script>
</head>
<body>
<div id="mainDiv" style="border: 5px dotted lightgray; padding: 10px;">
<button onclick="expand('mainDiv', 400, 550); return false;">Click to Expand Area</button><br>
<button onclick="newButton('mainDiv'); return false;">Make New Button</button>
</div>
</body>
</html>