테스트 사이트 - 개발 중인 베타 버전입니다
SIR

그림클릭시 레이어 띄우기

CLUB
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 18년 전 · 2325
<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>
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
11470
PHP 64비트용 php5.1
11469
PHP (win) xdebug와 xampp 사용하기
11468
PHP php debugger tool list
11457
기타 자연스러운 구름 만들기 10
29100
HTML 자연스럽고 간단한 Foggy 필터 효과 5
11448
기타 핑이 안되는 증상은? 8
11444
Flash 화이어폭스에서 플래시투명하게.. 3
24851
거래명세서(엑셀)
29091
HTML 포토샵팁 73가지 8
11440
기타 vista x64용 아파치 (비공식 사이트) 3
11434
JavaScript [팁]웹상이나 포토샵에서 이미지 작업시 필요한 색상이 따로 있는걸 아세요? 5
11431
PHP 계정별 register_global 설정 2
11420
기타 아쿠아틱볼만들기~ 10
11415
PHP apache log처리에 대해 4
11412
기타 404에러페이지로 2차도메인 만들기에 대한 질문입니다. 2
29087
HTML 일러스트 CS2에 있는 심볼들을 그림에 넣어보자!! 3
11408
기타 포토샵 쓸때 메탈재질의 느낌을 어떻게 표현해야하죠? 3
11402
기타 포토샵의 되돌리기 기능을 20단계 이상 올리는 방법 5
11397
JavaScript PHP에서 성능 개선을 위한 유용한 팁 4
11389
MySQL PHP 초보적인 질문인데 너무 궁금해서요 7
11387
기타 iptables ip 차단 1
11383
Flash 포토샵에 쓰이는 파일 정보 3
11375
기타 포토샵 고급으로 가는 첫걸음. 레이어 마스크 알기~ GO! GO! 7
11370
기타 사라진 폰트를 복구 하려면? 4
11362
기타 디카사진 보정효과 7
11354
JavaScript 강렬한 Sketch(스케치) 효과 7
11349
JavaScript 포토샵 단축키 모음 4
11348
JavaScript 셀렉트 박스 이뿌게 꾸미기
11347
JavaScript 데몬 Daemon 설명
11342
기타 불에 탄듯한 이미지. 4
11338
JavaScript 서버호스팅 트래픽 계산방법 3
29084
HTML 뒷배경을 채우기 2
11335
JavaScript APM 설치전 필수 라이브러리 다운로드 및 설치 2
11327
기타 모서리가 뜬 사진 틀 만들기 7
11325
JavaScript Alpha 채널을 이용하여 Halftone Dot Image 만들기 1
11318
Flash 플래시나 동영상파일에 "이 컨트롤을 활성화 하시려면........ 6
11312
기타 그림자 글씨 만들어 볼까요? 5
11308
기타 사진에 글시 쓰기 3
11303
PHP 이름기반 가상호스트 설정관련 질문입니다 4
11300
기타 이미지 합성하기 2
29077
HTML 부분 흑백 만들기 6
24849
간단하고 편리한 간이 영수증 1
29075
HTML 스크롤바 색상 변경해주는 소스 1
29070
HTML Outer Glow와 Inner Glow를 이용하여 투명 둥근 버튼(Glass Sphere) 만들기 4
11291
JavaScript 재미 있는 네비입니다. 8
11290
JavaScript mod_rewrite 를 적용하기 위한 http.conf 설정
11288
기타 트리아얼버젼 저장하는 방법 1
11285
JavaScript 잘 되던 포토샵이 갑자기 실행이 안될때 2
29068
HTML 단축기와 용어/팁 1
11282
JavaScript (급질..제발..)리눅스와 윈도우 멀티부팅에서 메뉴가 사라졌어요.커널 패닉문제 2
11279
기타 독특한 swish source 2
11271
Flash flash source 입니다 (네비) 7
11267
Flash 드디어 cs3 이 출시 했다고 합니다. 3
11264
기타 PHP 설정을 어떻게 할것인가? 2
11263
JavaScript [스크립트] 이미지 없는 둥글게 테두리 DIV
29064
HTML 한글패치의 삭제 방법 3
11256
기타 포토&#49406; CS에서 3D랜더 필터가 안될 때 6
11250
기타 CS버전을 깐 후 탐색기에서 PSD 미리보기가 안될 때 5
11244
JavaScript 왜곡과 수평 바로잡기 (동영상) 5
11238
기타 치아 미백효과(하얗게만들기) 5
11237
기타 파노라마 사진제작 (동영상)
11234
기타 포토샵강좌 / 인물 사진 간단하게 보정하기 2
29061
HTML 포토샵에서 갑자기 도구 모양이 이상하게 보일때 2
11231
기타 아이콘 이미지나 도트이미지의 크기를 줄이거나 확대해서 쓰고 싶을때... 2
11228
기타 하얀색이 노랗게 보일때 2
11226
기타 이미지 레디에서 움직이는 횟수조절하는 법 1
29056
HTML 플래쉬 인트로자동으로 로딩되게 4
11223
기타 브러시 또는 펜툴 사이즈 조절하기 2
11216
MySQL 익스플로러7 팝업창의 주소창 없애기 6
11214
기타 iframe에 관해서 1
24846
결혼정보 회원가입 신청서 2
11210
JavaScript 포토샵8.0cs 분할영역 도구로 일부 영역만 저장은 불가능 한가요? 3
11206
JavaScript 유용한 포샵단축키 3
11199
MySQL latin1_swedish_ci => utf8 로 변환 문의 6
11194
JavaScript 유용한 포토샵 강좌 사이트 4
11190
JavaScript Jpeg등으로 압축하지 않고 Photoshop파일 사이즈 줄이기 3
29052
HTML 특정레이어만 선택해서 보기 3
11188
기타 파일업로드 관련 질문?? 1
11182
기타 여러 장의 이미지를 한 번에 닫기 5
11178
JavaScript 포토삽을 초기화 하고 싶을때 3
29048
HTML 아이콘 이미지나 도트이미지의 크기를 줄이거나 확대해서 쓰고 싶을때 3
11171
Flash 플래쉬 네비게이션 질문입니다... 6
11163
기타 B.I(Brand Identity)가 뉘집아이? 7
11159
기타 심볼마크와 로고 3
11154
기타 C.I가 무엇에 쓰는 물건인고? 4
29047
HTML 파일에 이미지를 포함시키는 방법
29037
HTML 포토샵을 빨리 뜨게 하려면... 9
11149
JavaScript 포토샵에서 작업하다 글자 사이즈가 갑자기 커지거나 작아질 때..... 4
29036
HTML PDF 세션에 대한 원리 및 보안
11135
JavaScript 고급스런 색상 만들기 혹은 선택하기... 13
29032
HTML prototype.js 1.5 API Document PDF 3
11134
JavaScript 롤오버 자바스크립트입니다.
11129
JavaScript 포토샵 한영키 안먹을때..(다른 프로그램도 마찬가지..영구적용) 4
29031
HTML 아래에 있는 trim을 보다가 조금 수정해봤습니다.
11127
MySQL [펌] MySQL 3.23.52 -> 4.0.17 버전으로 업그레이드 설치하는법 1
29026
HTML 이미지 저작권 관련 설명 7탄 4
11119
기타 Royalty-Free(로얄티프리)는 공짜다?? 7
11115
Flash asp에서 이올라스 패치 해결방법 질문드립니다. 3
29020
HTML 이미지 저작권 관련 설명 6탄 5
11113
기타 이미지 저작권 관련 설명 5탄 1
이전 다음
전체 목록