이전
목록
다음
엠

그림클릭시 레이어 띄우기

CLUB
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 19년 전 · 2469
<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,913
19년 전 조회 1,837
19년 전 조회 2,631
19년 전 조회 2,448
19년 전 조회 3,588
19년 전 조회 2,716
19년 전 조회 2,692
19년 전 조회 3,534
19년 전 조회 4,751
19년 전 조회 3,095
19년 전 조회 2,930
19년 전 조회 3,475
19년 전 조회 6,402
19년 전 조회 2,321
19년 전 조회 2,119
19년 전 조회 2,085
19년 전 조회 2,131
19년 전 조회 3,311
19년 전 조회 2,383
19년 전 조회 2,062
19년 전 조회 1,765
19년 전 조회 2,216
19년 전 조회 3,498
19년 전 조회 3,344
19년 전 조회 2,050
19년 전 조회 1,612
19년 전 조회 3,297
19년 전 조회 2,180
19년 전 조회 1,734
19년 전 조회 2,973
19년 전 조회 2,101
19년 전 조회 1,978
19년 전 조회 1,944
19년 전 조회 1,907
19년 전 조회 2,339
19년 전 조회 2,757
19년 전 조회 1,904
19년 전 조회 1,662
19년 전 조회 1,656
19년 전 조회 1,619
19년 전 조회 3,340
19년 전 조회 3,042
19년 전 조회 1,777
19년 전 조회 3,548
19년 전 조회 1,969
19년 전 조회 1,608
19년 전 조회 2,083
19년 전 조회 2,224
19년 전 조회 1,783
19년 전 조회 2,470
19년 전 조회 2,112
19년 전 조회 1,729
19년 전 조회 1,914
19년 전 조회 2,166
19년 전 조회 1,933
19년 전 조회 1,714
19년 전 조회 1,780
19년 전 조회 3,273
19년 전 조회 2,130
19년 전 조회 1,995
19년 전 조회 4,490
19년 전 조회 5,116
19년 전 조회 3,285
19년 전 조회 3,026
19년 전 조회 3,627
19년 전 조회 2,159
19년 전 조회 2,522
19년 전 조회 2,813
19년 전 조회 2,887
19년 전 조회 2,487
19년 전 조회 1,747
19년 전 조회 3,531
19년 전 조회 2,102
19년 전 조회 2,512
19년 전 조회 2,574
19년 전 조회 3,014
19년 전 조회 5,337
19년 전 조회 2,611
19년 전 조회 3,447
19년 전 조회 4,384
19년 전 조회 2,643
19년 전 조회 2,584
19년 전 조회 4,174
19년 전 조회 2,875
19년 전 조회 3,111
19년 전 조회 2,339
19년 전 조회 2,337
19년 전 조회 2,126
19년 전 조회 3,421
19년 전 조회 2,235
19년 전 조회 2,922
19년 전 조회 1,874
19년 전 조회 5,432
19년 전 조회 3,688
19년 전 조회 4,447
19년 전 조회 3,183
19년 전 조회 2,655
19년 전 조회 4,046
19년 전 조회 2,778
19년 전 조회 3,121
이전 첫 페이지 다음
글쓰기