Javascript

2009.09.05 03:15 read.809

마우스오버시나오는 반투명 팝업메뉴

2009.09.05 03:15:44

<html>
<head>
<title>script.ne.kr-마우스오버시나오는 반투명 팝업메뉴</title>

var dofade=true;

var centertext=false;

var xoffset=1; // (마우스커서를기점으로)팝업 메뉴창이 뜨는 width 위치

var yoffset=5; // 마우스커서를기점으로)팝업 메뉴창이 뜨는 height 위치

var mousefollow=false;

var hideDelay=3; // 메뉴창에 마우스를 대면 반투명으로 나오는 시간

function altProps(){
this.w3c=(document.getElementById)?true:false;
this.ns4=(document.layers)?true:false;
this.ie4=(document.all && !this.w3c)?true:false;
this.ie5=(document.all && this.w3c)?true:false;
this.ns6=(this.w3c && navigator.appName.indexOf("Netscape")>=0 )?true:false;
this.w_y=0;
this.w_x=0;
this.navtxt=null;
this.boxheight=0;
this.boxwidth=0;
this.ishover=false;
this.ieop=0;
this.op_id=0;
this.oktomove=false;
this.dy=0;
}

var AT=new altProps();

function toggle_centertext(){
centertext=!centertext;
}

function toggle_mousefollow(){
mousefollow=!mousefollow;
}

function toggle_dofade(){
dofade=!dofade;
if(!dofade)AT.ieop=100;
}

function getwindowdims(){
AT.w_y=(AT.ie5||AT.ie4)?document.body.clientHeight:window.innerHeight;
AT.w_x=(AT.ie5||AT.ie4)?document.body.clientWidth:window.innerWidth;
}

function getboxwidth(){
if(AT.ns4)AT.boxwidth=(AT.navtxt.document.width)? AT.navtxt.document.width : AT.navtxt.clip.width;
else if(AT.ie4)AT.boxwidth=(AT.navtxt.style.pixelWidth)? AT.navtxt.style.pixelWidth : AT.navtxt.offsetWidth;
else AT.boxwidth=(AT.navtxt.style.width)? parseInt(AT.navtxt.style.width) : parseInt(AT.navtxt.offsetWidth);
}

function getboxheight(){
if(AT.ns4)AT.boxheight=(AT.navtxt.document.height)? AT.navtxt.document.height : AT.navtxt.clip.height;
else if(AT.ie4)AT.boxheight=(AT.navtxt.style.pixelHeight)? AT.navtxt.style.pixelHeight : AT.navtxt.offsetHeight;
else AT.boxheight=parseInt(AT.navtxt.offsetHeight);
}

function movenavtxt(x,y){
if(AT.ns4)AT.navtxt.moveTo(x,y);
else{
AT.navtxt.style.left=x+'px';
AT.navtxt.style.top=y+'px';
}}

function getpagescrolly(){
if(AT.ie5||AT.ie4)return document.body.scrollTop;
else return window.pageYOffset;
}

function getpagescrollx(){
if(AT.ie5||AT.ie4)return document.body.scrollLeft;
else return window.pageXOffset;
}

function writeindiv(text){
if(AT.ns4){
AT.navtxt.document.open();
AT.navtxt.document.write(text);
AT.navtxt.document.close();
}
else AT.navtxt.innerHTML=text;
}

function hideAlttxt(){
if(AT.ns4)AT.navtxt.visibility="hide";
else{
AT.navtxt.style.display="none";
AT.navtxt.style.visibility="hidden";
}
movenavtxt(-AT.boxwidth-10,0);
writeindiv('');
}

function incropacity(){
if(AT.ieop<=100){
AT.ieop+=7;
if(AT.ie4||AT.ie5)AT.navtxt.style.filter="alpha(opacity="+AT.ieop+")";
if(AT.ns6)AT.navtxt.style.MozOpacity=AT.ieop/100;
}else clearInterval(AT.op_id);
}

function moveobj(evt){
mx=(AT.ie5||AT.ie4)?event.clientX:evt.pageX;
my=(AT.ie5||AT.ie4)?event.clientY:evt.pageY;
if(AT.ishover && AT.oktomove){
margin=(AT.ie4||AT.ie5)?5:25;
if(AT.ns6)if(document.height+27-window.innerHeight<0)margin=15;
if(AT.ns4)if(document.height-window.innerHeight<0)margin=10;
if(AT.ns4||AT.ns6)mx-=getpagescrollx();
if(AT.ns4)my-=getpagescrolly();
xoff=mx+xoffset;
yoff=(my+AT.boxheight+yoffset-((AT.ns6)?getpagescrolly():0)>=AT.w_y)? -5-AT.boxheight-yoffset: yoffset;
movenavtxt( Math.min(AT.w_x-AT.boxwidth-margin , Math.max(2,xoff))+getpagescrollx(), my+yoff+((!AT.ns6)?getpagescrolly():0));
if(!mousefollow)AT.oktomove=false;
}}

</head>
<body>

<p align=center><b>마우스를 가만대고 있으면 반투명 >> 정상창으로 나옵니다</b></fot></p>

<a href="javascript:void(0)" onmouseover="writetxt('<p> ▶ <a href=\'http://www.pu.to\' target=\'_blank\'>메뉴-------1</a></p><p> ▶ <a href=\'http://www.script.ne.kr\' target=\'_self\'>메뉴-------2</a></p><p> ▶ <a href=\'#\' onClick="javascript:alert(\'사랑해...홍영애\');">메뉴-------3</a></p><p> ▶ <a href=\'#\' onClick="javascript:window.open(\'http://www.script.ne.kr\', \'Mlang\',\'width=650,height=500,top=0,left=0,statusbar=no,resizable=yes,scrollbars=no,toolbar=no\');">메뉴-------3</a></p>'); return true" onmouseout="writetxt(0)">메뉴로 호출할때</a>

<BR><BR>

<a href="javascript:void(0)" onmouseover="writetxt('<img src=\'http://www.script.ne.kr/img/logo/girl-good.jpg\' border=0>');" onmouseout="writetxt(0)">이미지 호출할때</a>

<a href="javascript:void(0)" onmouseover="writetxt('흐흐흐흐 죽이시졍..... *^^*<br>위에 메뉴로 호출할때 보시면<br>링크형식을 다 틀리게 하였습니다.<br>그건 알아서 이용하시고욤 해해^^<br>script 구문이 너무기시면 js로 만들어가 호출하시기 바랍니다,,.'); return true" onmouseout="writetxt(0)">설명창으로 호출할때</a>

</p>

</body>
</html>

추가메뉴 목록

엮인글 0

http://cat.hubweb.net/board_s1js1/655/523/trackback

21	마우스 커서 제어하기	2009.09.08
20	즐겨찾기 추가 소스	2009.09.08
19	소스막기 소스보기	2009.09.08
18	이미지 링크시 점선 안보이게	2009.09.08
17	오른쪽 버튼막기	2009.09.08
16	해상도에 따라 다른 문서열리기	2009.09.08
15	웹페이지에 동양상 띄우기	2009.09.08
14	이미지 트랜지션	2009.09.08
13	풀스크린_1	2009.09.08
12	아래의 세가지 방법은 브라우저를 {전체화면모드}로 열리게하는 스크립트입니다.	2009.09.08
11	자신을 풀스크린으로 보여줌	2009.09.05
10	플래시 풀스크린	2009.09.05
9	풀스크린(flash+javascript)	2009.09.05
8	풀스크린닫기	2009.09.05
7	윈도우 최소화 버튼만들기	2009.09.05
>	마우스오버시나오는 반투명 팝업메뉴	2009.09.05
5	테이블에 스크롤바 생성하기	2009.09.05
4	레이어 팝업창 만들어줘요	2009.09.05
3	레이어 팝업 - 정해진 시간동안 하루한번 열기	2009.09.05
2	배경이미지 시간타임으로 변함	2009.09.05

1 2 >

엮인글 0

LOGIN