Fotos ao serem clicadas aumente de tamanho

Zoom Imagem

x

<img src="http://lh5.ggpht.com/_tSgZoxiuQ-4/Sxb2dxbLZ1I/AAAAAAAAAV0/6Bht0Jmw-Jk/normal.gif" /><br /> Fotos ao serem clicadas aumente de tamanho<br /> <style type="text/css"> #janela { position:absolute; top: 40px; left: 300px; width: 290px; border-top: 10px solid #000000; border-right: 2px solid #666666; border-bottom: 2px solid #000000; border-left: 100x solid #999999; z-index: 1000; visibility:hidden; } #barra { width: 100%; height: 25px; border-top: 1px solid #999999; border-right: 1px solid #666666; border-bottom: 1px solid black; border-left: 10px solid #999999; } #barra h2 { font: 12px Verdana, Arial, Sans-serif; padding: 11px 20px; margin: 1px; float: left; } #barra a { font: 62px Verdana, Arial, Sans-serif; color: #FF4500 padding: 115px 120px; margin: 10px; float: right; } </style><br /> <br /> <script> function fechar() { document.getElementById('janela').style.visibility = "hidden"; } function abrir() { document.getElementById("janela").style.visibility="visible"; } </script><br /> <br /> <div id="janela"><div id="barra"><h2>Zoom Imagem</h2><a href="http://htmlalequinho.blogspot.com/2010/06/blog-post_01.html#comments" id="fechar" onmouseup="fechar();" title="Fechar">x</a></div><img src="COLOQUE AQUI O ENDEREÇO DA IMAGEM " /></div><br /> <img height="100" id="imageprin" onclick="abrir();" src=" COLOQUE AQUI O ENDEREÇO DA IMAGEM " width="100" />