Как сделать миниатюру, чтобы при нажатии разворачивалась на максимум

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
  <head>
    <title>Анимации Myachik
</title>
    <style type="text/css">
        #div {
            width : 100px;
            height : 100px;
            border : 1px solid #f00;
        }
    </style>
    <script language="JavaScript">
        function $(id) {
            return document.getElementById(id)
        }
        function div_increase(sw, sh, ew, eh, o) {
            $(o).style.width = sw
            $(o).style.height = sh
            if ( sw<ew ) {
                setTimeout('div_increase(' + (sw+2) + ',' + (sh+2) + ', ' + ew + ', ' + eh + ',o)', 2)
            }
        }
        function div_decrease(sw, sh, ew, eh, o) {
            $(o).style.width = sw
            $(o).style.height = sh
            if ( sw>ew ) {
                setTimeout('div_decrease(' + (sw-5) + ',' + (sh-5) + ', ' + ew + ', ' + eh + ',o)', 2)
            }
        }
    </script>
    <link rel="shortcut icon" href="http://vladik-myachikov.narod.ru/znach.ico" type="image/x-icon">
  </head>
 
  <body bgcolor="#009966" ms_positioning="GridLayout" style="WIDTH: 877px; HEIGHT: 838px">
    <p align="left"></p>
    <p align="left"><font color="#ffff33" size="6">
</font>
    </p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<p></p>
    <img style="Z-INDEX: 2; LEFT: 14px; WIDTH: 213px; POSITION: absolute; TOP: 118px; HEIGHT: 45px" height="53" alt="" src="http://vladik-myachikov.narod.ru/od.jpg" width="501" onmousemove="src=&quot;http://vladik-myachikov.narod.ru/oa.jpg&quot;; document.getElementById('sge').style.display = 'block'" onmousedown='src="http://vladik-myachikov.narod.ru/uad.jpg"' onmouseout="src=&quot;http://vladik-myachikov.narod.ru/od.jpg&quot;; document.getElementById('sge').style.display = 'none'" onclick="div_increase(100, 72, 500, 500, 'sge')" ondblclick="div_decrease(500, 500, 200, 200, 'sge')">
    <div style="DISPLAY: inline; Z-INDEX: 13; LEFT: 30px; WIDTH: 70px; POSITION: absolute; TOP: 126px; HEIGHT: 15px" ms_positioning="FlowLayout">Супергерой
</div>
    <div style="DISPLAY: inline; Z-INDEX: 13; LEFT: 30px; WIDTH: 70px; POSITION: absolute; TOP: 126px; HEIGHT: 15px" ms_positioning="FlowLayout">Супергерой
</div>
    <div style="DISPLAY: inline; Z-INDEX: 13; LEFT: 30px; WIDTH: 70px; POSITION: absolute; TOP: 126px; HEIGHT: 15px" ms_positioning="FlowLayout">Супергерой
</div><img
         style="DISPLAY: none; Z-INDEX: 14; LEFT: 70px; WIDTH: 100px; POSITION: absolute; TOP: 150px; HEIGHT: 72px" alt="" src="http:\\Vladik-myachikov.narod.ru/193.gif" id="sge" onclick="document.getElementById('sge').style.display = 'none'" onmouseout="document.getElementById('sge').style.display = 'none'">
    <br><br><br>
 
 
</body>
</html>

div_decrease(500, 309, 101, 77, '4e')