그림클릭시 레이어 띄우기

· 2006-12-15 (금) 12:13:08 · 3500
<HTML>
<HEAD>
<TITLE>코리아인터넷닷컴 자바스크립트 소스/예제 모음</TITLE>
</head>

<body bgcolor="#FFFFFF" text="#000000" link="#000000" onload="initthumb();" alink="#000000" vlink="#000000" >
<p><center><font color="white"><b>▶ </b></font>
<a href="http://korea.internet.com/channel/index.asp?cid=189"><b>코리아인터넷닷컴 자바스크립트 소스/예제 모음</b></a></center><p>
<br><br>

<script language="javascript">
// 아직 레이어는 생성되지 않았다.
var trigger=0
// 아직 활성화된 레이어는 없다.
var vis=0
function initthumb()
{
document.onmousemove = sniff
document.onmouseup = sniff
document.onmousedown = sniff
// Trigger Netscape Mouse Check
if (document.layers){document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)}
// Call dummy to help IE get width + height
if (document.all)dopic('dummy','',1,1,1,1)
}
function sniff(e){
// 마우스의 위치정보를 얻는 부분
if (document.layers) {var mousex=e.pageX; var mousey=e.pageY;fx=mousex;fy=mousey;}
else if (document.all) {var mousex=event.x; var mousey=event.y+document.body.scrollTop;fx=mousex;fy=mousey}
}
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};
}
}
// 클릭하면 레이어를 숨겨주는 부분
function clearpic() {
// 보여진 레이어를 비활성화 시키는 부분
vis=0
if (document.layers){document.layers['picarea'].visibility="hide"};
if (document.all){picarea.style.visibility="hidden"};
}
//-->
</SCRIPT>
<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>
<td></td>
</tr>
<tr align="left">
<td colspan="2">
</td>
<td></td>
</tr>
</table>
<br><br>
</body>
</html><div class='small'>[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]</div>
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
+
제목 글쓴이 날짜 조회
07-07-16 조회 3,055
07-07-06 조회 2,915
07-07-06 조회 3,377
07-06-23 조회 3,204
07-06-16 조회 2,686
07-05-20 조회 4,202
07-05-09 조회 3,374
07-05-09 조회 6,021
07-05-04 조회 2,600
07-04-30 조회 9,732
07-04-27 조회 4,253
07-04-26 조회 3,368
07-04-25 조회 5,154
07-04-18 조회 7,704
07-04-13 조회 3,034
07-04-12 조회 6,546
07-04-12 조회 4,950
07-04-12 조회 3,270
07-04-11 조회 5,651
07-04-05 조회 6,299
07-03-24 조회 4,348
07-03-20 조회 3,656
07-03-18 조회 3,905
07-03-18 조회 4,686
07-03-17 조회 4,170
07-03-16 조회 4,078
07-03-15 조회 5,219
07-03-13 조회 5,312
07-03-13 조회 3,515
07-03-08 조회 4,438
07-03-08 조회 3,912
07-03-08 조회 3,225
07-03-08 조회 4,091
07-03-05 조회 4,321
07-03-04 조회 2,852
07-03-01 조회 5,888
07-02-28 조회 3,174
07-02-27 조회 4,346
07-02-26 조회 3,250
07-02-26 조회 2,947
07-02-23 조회 3,598
07-02-23 조회 3,567
07-02-22 조회 3,950
07-02-22 조회 3,744
07-02-19 조회 3,768
07-02-17 조회 4,790
07-02-14 조회 8,095
07-02-12 조회 3,858
07-02-10 조회 3,470
07-02-02 조회 3,702
07-01-31 조회 3,365
07-01-29 조회 3,214
07-01-25 조회 4,991
07-01-21 조회 3,163
07-01-19 조회 2,967
06-12-15 조회 3,955
06-12-15 조회 4,364
06-12-15 조회 2,861
06-12-15 조회 4,412
06-12-15 조회 3,277
06-12-15 조회 3,995
06-12-15 조회 2,961
06-12-15 조회 2,676
06-12-15 조회 4,556
06-12-15 조회 3,109
06-12-15 조회 3,181
06-12-07 조회 4,631
06-12-07 조회 3,923
06-12-04 조회 4,535
06-11-27 조회 3,618
06-11-21 조회 3,930
06-11-15 조회 3,363
06-11-04 조회 3,255
06-10-29 조회 3,910
06-10-13 조회 3,770
06-10-13 조회 4,139
06-10-13 조회 4,089
06-10-12 조회 5,292
06-10-12 조회 4,215
06-10-04 조회 3,698
06-10-02 조회 4,486
06-09-29 조회 2,980
06-09-26 조회 3,317
06-09-26 조회 3,571
06-09-26 조회 3,211
06-09-26 조회 3,371
06-09-26 조회 4,270
06-09-25 조회 4,570
06-09-22 조회 4,884
06-09-22 조회 3,466
06-09-21 조회 4,209
06-09-21 조회 4,201
06-09-21 조회 3,475
06-09-21 조회 5,138
06-09-21 조회 3,643
06-09-21 조회 3,406
06-09-20 조회 2,937
06-09-15 조회 3,074
06-09-13 조회 3,375
06-09-11 조회 3,194