[펌] - 사진을 클릭하면 레이어가 형성되어 그 안에 확대된 사진이 나오게 하는 스크립트

위 예제에 대한 소스코드를 순서대로 하나하나 살펴보도록 하자.

<table width="100%" height="100%"> <tr align="left"> <td colspan="2"> <script language="Javascript"><!-- var d=new Date();var r=(d.getTime()%8673806982)+Math.random();var uu=escape(window.location.href); var wh='" width="728" height="90" ';var host='.casalemedia.com/';var dc=document; var fr='marginwidth="0" hspace="0" vspace="0" frameborder="0" scrolling="no">'; dc.write('<ifr'); dc.write('<a hr'); dc.write('<i'); //--></script> </td> <td></td> </tr> <tr valign="top"> <td align="left" style="padding:10 0 0 100"> <CENTER> <font face="arial" size=2> <BR><BR><B>사진을 클릭해 보세요.</B><BR>크게 나타난 사진을 클릭하시면 사진이 사라집니다.<BR><BR> 위치 지정 : 자동 , 가로 오프셋 : 0 , 세로 오프셋 : 0 <br> <a href="javascript:dopic('kic_hp.jpg',1, 0,0)"><IMG SRC="http://korea.internet.com/images/javascript/kic_hp.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> 위치 지정 : 자동 , 가로 오프셋 : 100 , 세로 오프셋 : 100 <br> <a href="javascript:dopic('kic_hp.jpg',1, 100,100)"><IMG SRC="http://korea.internet.com/images/javascript/kic_hp.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> 위치 지정 : 수동 , 가로 오프셋 : 0 , 세로 오프셋 : 0 <br> <a href="javascript:dopic('kic_hp.jpg',0, 0,0)"><IMG SRC="http://korea.internet.com/images/javascript/kic_hp.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> 위치 지정 : 수동 , 가로 오프셋 : 300 , 세로 오프셋 : 0 <br> <a href="javascript:dopic('kic_hp.jpg',0, 300,0)"><IMG SRC="http://korea.internet.com/images/javascript/kic_hp.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A><BR><BR> 위치 지정 : 수동 , 가로 오프셋 : 0 , 세로 오프셋 : 500 <br> <a href="javascript:dopic('kic_hp.jpg',0, 0,500)"><IMG SRC="http://korea.internet.com/images/javascript/kic_hp.jpg" WIDTH=96 HEIGHT=72 ALT="" BORDER="0"></A> </FONT> </CENTER> <BR><BR> </td> <td align="right" style="padding:10"> </td> </tr> <tr align="left"> <td colspan="2"> </td> <td></td> </tr> </table>

이부분은 에 넣어줄 부분이다. 테이블을 만들어 그안에 사진을 넣어주고, 그 사진을 클릭했을 때 어디에 위치할 것인지를 설정하여 dopic()함수를 호출해 준다.
그렇다면 dopic()함수의 소스코드를 살펴 보자.

function dopic(name,auto,picx,picy) { if (vis == 0) // 활성화된 레이어가 없다면.. { // 기본값 var oldpicx=100; var oldpicy=100; var rahmen='silver' var alttext="클릭하면 사진이 사라집니다." // 레이어가 없을 때 if (trigger!=1) { trigger=1 // 레이어를 생성해 준다. // 숨겨진 레이어를 만든다(Netscape) if(document.layers){ document.layers['picarea'] = new Layer(1); document.layers['picarea'].left = oldpicx; document.layers['picarea'].top = oldpicy; document.layers['picarea'].height = 20; document.layers['picarea'].visibility = "hidden"; } // 숨겨진 레이어를 만든다(IE) else if (document.all){ document.body.insertAdjacentHTML("BeforeEnd",'<DIV ID="picarea" STYLE="z-index:200;position:absolute;left:"+picx+";top:"+picy></DIV>'); } } // 만약에 레이어가 있다면, 숨겨준다. if (trigger != 0){ if (document.layers){document.layers['picarea'].visibility="hide"} //Netscape if (document.all){picarea.style.visibility="hidden"} } // 레이어의 내용을 정해주는 부분 content="<a href=\"javascript:clearpic()\" style=\"color:"+rahmen+"\"><img src=\"http://korea.internet.com/images/javascript/"; content=content+name+"\" name=\"pic\" alt=\""+alttext+"\" border=1"; content=content+"></A>"; // 레이어 안에 정해준 내용을 넣고, 보여주는 부분(Netscape) if (document.layers) { sprite=document.layers['picarea'].document; sprite.open(); sprite.write(content); sprite.close(); // 위치가 자동적으로 지정되지 않을 때, 레이어를 처음에 정해주었던 기본 위치에 위치시킨다. if (picx != null && auto == ''){ document.layers['picarea'].left = picx; document.layers['picarea'].top = picy; } // 위치가 자동적으로 지정되게 되어있으면.. if (auto != "") { // 사진의 폭과 높이를 얻는부분 xw=document.layers['picarea'].document.images['pic'].width yw=document.layers['picarea'].document.images['pic'].height // 사진의 중심부분의 위치를 새롭게 마우스의 위치로 설정한다. newpicx = fx - (xw/2) newpicy = fy - (yw/2) // 오프셋이 있다면, 그것도 맞춰서 설정해 준다. if (picx) {newpicx=newpicx + picx} if (picy) {newpicy=newpicy + picy} // 레이어의 위치를 설정해 준다. document.layers['picarea'].left = newpicx; document.layers['picarea'].top = newpicy; } // 레이어를 보여준다. document.layers['picarea'].visibility="show"; // 활성화된 레이어가 있다고 바꿔준다. vis=1 } // 레이어 안에 정해준 내용을 넣고, 보여주는 부분(IE) if (document.all) { document.all['picarea'].innerHTML = content; // 위치가 자동적으로 지정되지 않을 때, 레이어를 처음에 정해주었던 기본 위치에 위치시킨다. if (picx != null && auto == ''){ picarea.style.top=picy picarea.style.left=picx; } // 위치가 자동적으로 지정되게 되어있으면.. if (auto != "") { // get the picture width/height xw=document.all['pic'].width yw=document.all['pic'].height // 사진의 중심부분의 위치를 새롭게 마우스의 위치로 설정한다. newpicx = fx - (xw/2) newpicy = fy - (yw/2) // 오프셋이 있다면, 그것도 맞춰서 설정해 준다. if (picx) {newpicx=newpicx + picx} if (picy) {newpicy=newpicy + picy} // 레이어의 위치를 설정해 준다. picarea.style.top=newpicy; picarea.style.left=newpicx; } // 레이어를 보여준다. // 만약에 이름이 정해져 있다면.. if (name != "dummy") { picarea.style.visibility="visible"; // 활성화된 레이어가 있다고 바꿔준다. vis=1 } } else if (document.layers == null && document.all == null) {self.location=name}; } }

위의 소스코드를 보면 알 수 있듯이 dopic(name,auto,picx,picy)함수에는 이미지의 이름, 위치 자동 설정여부(0=수동, 1=자동), 가로, 세로 오프셋값을 넣어준다.
만약 레이어의 위치를 수동으로 정해주게 되어있으면 정해준 가로, 세로로 오프셋만큼 떨어진 곳에 위치한다. 그리고 자동으로 설정되었다면 이미지를 클릭한 마우스의 위치에 가로세로 오프셋값을 더한 위치를 구하고, 그 곳에 레이어의 중심이 올 수 있도록 해준다.
물론 이런 값들은 원하는 대로 바꿔서 사용하면 된다.
실제로 이 스크립트를 이용할 때는 원하는 사진, 레이어의 위치, 원하는 설명들을 직접 넣고, 이미지의 배열 위치 또한 원하는 대로 바꿔서 사용하기 바란다.


[출처] : http://www.internetnews.com/channel/content.asp?cid=189&nid=36601