이전
목록
다음
엠

그림클릭시 레이어 띄우기

CLUB
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 19년 전 · 2433
<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,889
19년 전 조회 1,804
19년 전 조회 2,596
19년 전 조회 2,409
19년 전 조회 3,553
19년 전 조회 2,687
19년 전 조회 2,656
19년 전 조회 3,499
19년 전 조회 4,724
19년 전 조회 3,071
19년 전 조회 2,896
19년 전 조회 3,438
19년 전 조회 6,378
19년 전 조회 2,295
19년 전 조회 2,091
19년 전 조회 2,060
19년 전 조회 2,105
19년 전 조회 3,288
19년 전 조회 2,356
19년 전 조회 2,037
19년 전 조회 1,733
19년 전 조회 2,192
19년 전 조회 3,467
19년 전 조회 3,314
19년 전 조회 2,016
19년 전 조회 1,585
19년 전 조회 3,269
19년 전 조회 2,150
19년 전 조회 1,712
19년 전 조회 2,941
19년 전 조회 2,073
19년 전 조회 1,955
19년 전 조회 1,914
19년 전 조회 1,879
19년 전 조회 2,312
19년 전 조회 2,729
19년 전 조회 1,872
19년 전 조회 1,630
19년 전 조회 1,628
19년 전 조회 1,587
19년 전 조회 3,304
19년 전 조회 3,011
19년 전 조회 1,752
19년 전 조회 3,512
19년 전 조회 1,938
19년 전 조회 1,581
19년 전 조회 2,051
19년 전 조회 2,187
19년 전 조회 1,744
19년 전 조회 2,434
19년 전 조회 2,084
19년 전 조회 1,701
19년 전 조회 1,881
19년 전 조회 2,135
19년 전 조회 1,903
19년 전 조회 1,681
19년 전 조회 1,743
19년 전 조회 3,249
19년 전 조회 2,098
19년 전 조회 1,962
19년 전 조회 4,465
19년 전 조회 5,093
19년 전 조회 3,255
19년 전 조회 2,989
19년 전 조회 3,590
19년 전 조회 2,135
19년 전 조회 2,499
19년 전 조회 2,782
19년 전 조회 2,859
19년 전 조회 2,458
19년 전 조회 1,722
19년 전 조회 3,494
19년 전 조회 2,072
19년 전 조회 2,477
19년 전 조회 2,546
19년 전 조회 2,981
19년 전 조회 5,311
19년 전 조회 2,575
19년 전 조회 3,406
19년 전 조회 4,358
19년 전 조회 2,596
19년 전 조회 2,548
19년 전 조회 4,136
19년 전 조회 2,836
19년 전 조회 3,070
19년 전 조회 2,300
19년 전 조회 2,317
19년 전 조회 2,094
19년 전 조회 3,392
19년 전 조회 2,215
19년 전 조회 2,894
19년 전 조회 1,841
19년 전 조회 5,400
19년 전 조회 3,656
19년 전 조회 4,409
19년 전 조회 3,152
19년 전 조회 2,626
19년 전 조회 4,011
19년 전 조회 2,741
19년 전 조회 3,077
이전 첫 페이지 다음
글쓰기