펌 : http://dumbung.com/main/bbs/board.php?bo_table=HTML_LIBRARY&wr_id=104&sca=CSS

 

<html>
<head>
<title>스타일로 줌 효과 주기</title>

<script type="text/javascript">
<!--예제 스크립트
function styleZoom(cno) {
var z;
var obj = document.getElementById('zbox');
var osize = document.getElementById('zsize');
var csize = parseInt(obj.style.zoom);

  if(cno) {
 z = csize + 10 + '%';
 obj.style.zoom = z;
 osize.innerText = ' zoom:' + z;
  }
  else {
 z = csize - 10 + '%';
 if(z == '0%')
  alert('더이상 작아지기 싫어요!!');
 else {
  obj.style.zoom = z;
  osize.innerText = ' zoom:' + z;
 }
  }
}
//스크립트 끝-->
</script>

<style type="text/css">
<!--
A {font-weight: bold; color: #FFFFFF; text-decoration: none}
TABLE {border: #000000 1px solid}
#zsize {font: bold 11pt; color: #FF0000}
#zbox {width: 200}
.zctr {background-color: #000000}
-->
</style>

</head>
<body onLoad="document.getElementById('zbox').style.zoom='100%';document.getElementById('zsize').innerText=' zoom:100%'">

<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="zctr"><a href="javascript:styleZoom(1)">+</a></td>
    <td width=100><span id="zsize"></span></td>
    <td class="zctr"><a href="javascript:styleZoom()">-</a></td>
  </tr>
</table>

<div id="zbox"><img src="