<html>
<head>
<title>스타일로 줌 효과 적용 하기</title>
<!--
<body> 태그에서 이벤트헨들러를 사용 합니다.
onLoad="Zoom_Style.style.zoom="100%";Magnification.innerText="zoom:100%""
페이지가 로드 되었을때 id=Zoom_Style에 zoom스타일을 100%주고 id=Magnification에 zoom:100%라로 표시 합니다.
<a href="JavaScript:zoom_P()">+</a> +을 누르면 zoom_P()를 실행 하여 10% 증가 합니다.
<a href="JavaScript:zoom_M()">-</a> -을 누르면 zoom_M()를 실행 하여 10% 감소 합니다.
<span id="Magnification"></span>
펑크션에서 아래 부분에 해당되는 곳으로 본문중 +- 다음에(zoom:배율) 이것입니다.
Magnification.innerText = "zoom:"+ z +"";
<div id="Zoom_Style"></div> 본문중 애국가를 보여 주는 곳으로써 펑크션에 의해 증가 또는 감소 됩니다.
예제는 설명 하기 위해서 간단히 텍스트만 사용 했지만 이미지 또한 가능 하며 이 예제뿐 아니라 모든 예제들이 꼭 그와 같은 상황에서만 쓰는 것이 아니라는 것 분명히 아시고 많이 응용해 보세요.
-->
<script language="javascript">
<!--예제 스크립트
function zoom_P() {
//줌 증가
z = parseInt(Zoom_Style.style.zoom)+10 + "%";
//문자열과 정수를 계산 하여 정수로 바꾸어 줍니다. Zoom_Style.style.zoom 이 10% 증가
Zoom_Style.style.zoom = z;
//10% 증가된 상태를 담고 다시 클릭시 변수 z로 가서 증가된 값에 10%를 더해주기 위해서 지정
Magnification.innerText = "zoom:"+ z +"";
//span태그안에 증가된 %를 보여 줍니다.
}
function zoom_M() {
//줌 감소
z = parseInt(Zoom_Style.style.zoom)-10 + "%";
//문자열과 정수를 계산 하여 정수로 바꾸어 줍니다. Zoom_Style.style.zoom 이 10% 감소
Zoom_Style.style.zoom = z;
//10% 감소된 상태를 담고 다시 클릭시 변수 z로 가서 감소된 값에 10%를 빼주기 위해서 지정
Magnification.innerText = "zoom:"+ z +"";
//span태그안에 감소된 %를 보여 줍니다.
}
//스크립트 끝-->
</script>
<style type="text/css">
<!--
TABLE, #Zoom_Style {border: #000000 1px solid}
/*테이블과 애국가 부분에 검은색 테두리*/
#Zoom_Style {width: 260px; padding: 5px}
/*애국가 부분 넓이 260 테두리로 부터 5픽셀 공간*/
SPAN {
font-weight: bold; font-family: verdana, arial, sans-serif;
color: #FF0000; font-size: 8pt; padding: 2px
}
/*증감 나오는 부분 글씨와 관련된 스타일*/
TABLE A {
font-weight: bold; color: #FFFFFF; text-decoration: none
}
/*테이블 안에 앵커 태그의 스타일(+,-)기호 부분*/
.CTR {width: 15px; background-color: #000000}
/*(+,-)기호 부분 넓이 및 배경색*/
-->
</style>
</head>
<body onLoad="Zoom_Style.style.zoom="100%";Magnification.innerText="zoom:100%";">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class=CTR align=center>
<a href="JavaScript:zoom_P();">+</a>
</td>
<td class=CTR align=center>
<a href="JavaScript:zoom_M();">-</a>
</td>
<td>
<span id="Magnification"></span>
</td>
</tr>
</table>
<div id="Zoom_Style">
동해 물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리나라 만세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세<br>
남산위에 저소나무 철갑을 두른 듯<br>
바람 서리 불변함은 우리 기상일세<br>
무-궁화 삼-천리 화려강산<br>
대한 사람 대한으로 길이 보전하세
</div>
</body>
</html>
오렌지
