작은 이미지와 큰 이미지를 한 문서안에서 표시하기
작은 이미지(썸네일이미지)를 클릭하면 어느 특정영역에서 큰그림으로 보여지게끔하는 합니다.
보통 작은이미지를 클릭하면 새창으로해서 큰이미지를 보여주는 형태여서 매번 보고나면 닫기버튼을
클릭해줘야하는 번거로움을 덜 수 있는 자바스크립트 입니다.
|
|
|
우선 자바스크립트 소스를 <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 값 입니다.
다음 이미지파일을 <body>~</body>사이에 넣습니다.| <span style="cursor:hand" onClick="transimg(1)"><img src="img/thumb_img001.jpg" width="60" height="80" border="0"></span> <span style="cursor:hand" onClick="transimg(2)"><img src="img/thumb_img002.jpg" width="60" height="80" border="0"></span> <span style="cursor:hand" onClick="transimg(3)"><img src="img/thumb_img003.jpg" width="60" height="80" border="0"></span> <span style="cursor:hand" onClick="transimg(4)"><img src="img/thumb_img004.jpg" width="60" height="80" border="0"></span> <span style="cursor:hand" onClick="transimg(5)"><img src="img/thumb_img005.jpg" width="60" height="80" border="0"></span> |
위 이미지들은 작은 이미지에 해당하는 파일들입니다. 원하는 위치에 넣습니다.
transimg(숫자)는 <head>~</head>사이에 들어간 자바스크립트 내용중에 (change==숫자) 부분과 맞추어 주시면 됩니다.