이전
목록
다음
엠

그림클릭시 레이어 띄우기

CLUB
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 19년 전 · 2491
<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>
#퍼블리셔팁 #퍼블리셔 #팁자료실 #html
|
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
19년 전 조회 1,940
19년 전 조회 1,859
19년 전 조회 2,659
19년 전 조회 2,476
19년 전 조회 3,616
19년 전 조회 2,741
19년 전 조회 2,719
19년 전 조회 3,557
19년 전 조회 4,770
19년 전 조회 3,118
19년 전 조회 2,955
19년 전 조회 3,503
19년 전 조회 6,430
19년 전 조회 2,345
19년 전 조회 2,147
19년 전 조회 2,111
19년 전 조회 2,157
19년 전 조회 3,336
19년 전 조회 2,410
19년 전 조회 2,086
19년 전 조회 1,790
19년 전 조회 2,238
19년 전 조회 3,515
19년 전 조회 3,364
19년 전 조회 2,076
19년 전 조회 1,638
19년 전 조회 3,319
19년 전 조회 2,205
19년 전 조회 1,763
19년 전 조회 2,989
19년 전 조회 2,121
19년 전 조회 1,993
19년 전 조회 1,970
19년 전 조회 1,925
19년 전 조회 2,356
19년 전 조회 2,777
19년 전 조회 1,924
19년 전 조회 1,679
19년 전 조회 1,679
19년 전 조회 1,637
19년 전 조회 3,360
19년 전 조회 3,063
19년 전 조회 1,802
19년 전 조회 3,571
19년 전 조회 1,987
19년 전 조회 1,628
19년 전 조회 2,095
19년 전 조회 2,246
19년 전 조회 1,804
19년 전 조회 2,492
19년 전 조회 2,131
19년 전 조회 1,743
19년 전 조회 1,930
19년 전 조회 2,187
19년 전 조회 1,953
19년 전 조회 1,741
19년 전 조회 1,797
19년 전 조회 3,297
19년 전 조회 2,150
19년 전 조회 2,012
19년 전 조회 4,515
19년 전 조회 5,133
19년 전 조회 3,310
19년 전 조회 3,048
19년 전 조회 3,644
19년 전 조회 2,180
19년 전 조회 2,539
19년 전 조회 2,836
19년 전 조회 2,903
19년 전 조회 2,508
19년 전 조회 1,769
19년 전 조회 3,557
19년 전 조회 2,124
19년 전 조회 2,532
19년 전 조회 2,592
19년 전 조회 3,034
19년 전 조회 5,358
19년 전 조회 2,637
19년 전 조회 3,475
19년 전 조회 4,403
19년 전 조회 2,672
19년 전 조회 2,609
19년 전 조회 4,199
19년 전 조회 2,897
19년 전 조회 3,126
19년 전 조회 2,361
19년 전 조회 2,363
19년 전 조회 2,150
19년 전 조회 3,441
19년 전 조회 2,254
19년 전 조회 2,941
19년 전 조회 1,894
19년 전 조회 5,449
19년 전 조회 3,709
19년 전 조회 4,467
19년 전 조회 3,205
19년 전 조회 2,681
19년 전 조회 4,065
19년 전 조회 2,792
19년 전 조회 3,143
이전 첫 페이지 다음
글쓰기