<SCRIPT language=JavaScript>
<!--
function transimg(change) {
if (change==1) changeimg.src="http://demo.happycgi.com/doobab/thumb_big_img/img/img001.jpg";
if (change==2) changeimg.src="http://demo.happycgi.com/doobab/thumb_big_img/img/img002.jpg";
if (change==3) changeimg.src="http://demo.happycgi.com/doobab/thumb_big_img/img/img003.jpg";
if (change==4) changeimg.src="http://demo.happycgi.com/doobab/thumb_big_img/img/img004.jpg";
if (change==5) changeimg.src="http://demo.happycgi.com/doobab/thumb_big_img/img/img005.jpg";
}
// -->
</SCRIPT>
작은 이미지와 큰 이미지를 한 문서안에서 표시하기
작은 이미지(썸네일이미지)를 클릭하면 어느 특정영역에서 큰그림으로 보여지게끔하는 합니다. 보통 작은이미지를 클릭하면 새창으로해서 큰이미지를 보여주는 형태여서 매번 보고나면 닫기버튼을 클릭해줘야하는 번거로움을 덜 수 있는 자바스크립트 입니다.
아래 작은 이미지를 클릭하여보면 아래쪽영역에서 해당하는 큰이미지를 보실 수 있습니다.
우선 자바스크립트 소스를 <head>~</head>사이에 넣습니다.
<script language="JavaScript"> <!-- function transimg(change) { if (change==1) changeimg.src="img/img001.jpg"; if (change==2) changeimg.src="img/img002.jpg"; if (change==3) changeimg.src="img/img003.jpg"; if (change==4) changeimg.src="img/img004.jpg"; if (change==5) changeimg.src="img/img005.jpg"; } // --> </script>
img/img001.jpg ~ img/img005.jpg 이미지는 작은이미지를 클릭하였을 때 표시되는 큰이미지의 파일입니다. 큰이미지의 경로 및 파일명을 적으시면 되겠습니다. 해당 이미지의 경로주소는 상대경로 또는 절대경로 주소로 적으시면 되겠습니다. changeimg 는 큰 이미지가 표시되는 이미지영역의 name 값입니다.
다음 이미지파일을 <body>~</body>사이에 넣습니다.
<img src="img/img001.jpg" name="changeimg">
큰 이미지가 표시되는 영역의 이미지 파일입니다. img/img001.jpg 파일은 페이지 오픈시 먼저 표시되는 큰이미지 파일명입니다. name="changeimg" 는 큰이미지가 표시되는 영역부분에 이미지파일 속성중 name 값 입니다.
우선 자바스크립트 소스를 <head>~</head>사이에 넣습니다. 
다음 이미지파일을 <body>~</body>사이에 넣습니다. 
다음 이미지파일을 <body>~</body>사이에 넣습니다.
