YesYo.com MintState Forums
뒤로    YesYo.com MintState BBS > Tech > Javascript
검색
멤버이름    오토
비밀번호 
 

레이어에 도움말을 표시

페이지 정보

작성자 MintState 댓글 0건 조회 8,241회 작성일 08-11-17 13:13

본문

레이어에 도움말을 표시

아래 스크립트를 확인하세요.

1번째 방법
<script>
/**
 * ID가 alt인 DIV에 메세지를 표시하고 DIV를 표시한다.
 *
 * @param string text 표시할 내용
 * @see move, hide
 */
function show(text) {
	if(document.onmousemove==null) {
		move();
		document.onmousemove=move;
	}
   	alt.innerHTML=text;
   	alt.style.display="inline";
}

/**
 * ID가 alt인 DIV를 감춘다.
 * @see move, show
 */
function hide() {
    if(document.onmousemove!=null) document.onmousemove=null;
    alt.style.display="none";
}

/**
 * ID 가 alt인 레이어를 이동시킨다.
 * @see show, hide
 */
function move() {
    alt.style.pixelTop=window.event.y+document.body.scrollTop + 12;
    alt.style.pixelLeft=window.event.x+document.body.scrollLeft - 60;
}
</script>
<DIV id=alt></DIV>
<style>
#alt { BORDER-RIGHT: #ccdddd 3px solid; PADDING-RIGHT: 6px; BORDER-TOP: #ccdddd 3px solid; DISPLAY: none; PADDING-LEFT: 6px; FONT-SIZE: 9pt; BACKGROUND: #efffff; FILTER: alpha(opacity=100); PADDING-BOTTOM: 6px; OVERFLOW: hidden; BORDER-LEFT: #ccdddd 3px solid; LINE-HEIGHT: 150%; PADDING-TOP: 6px; BORDER-BOTTOM: #ccdddd 3px solid; POSITION: absolute; zindex: 100 }
.hand { cursor:pointer; }
</style>
<br />
<br />
레이어에 설명이 나옵니다. <SPAN onmouseover="show('여기가 설명이 나오는 부분 입니다.<br>어쩌구 저쩌구 http://yesyo.com');" onmouseout=hide(); class="hand">여기를 마우스를 올려보세요</SPAN>


2번째 방법
<script language="JavaScript">
//------- 미리보기 관련 div 처리-----------
function setPreviewBox() { 
  preview.style.posLeft = event.x + 15 + document.body.scrollLeft; 
  preview.style.posTop = event.y  + document.body.scrollTop-25;
} 

function showPreview( content) { 
    var text; 
    text ='<table cellpadding="5" bgcolor="#ffffff" style="font-size:9pt;color:#005F8B;filter:alpha(opacity=90); border-width:1; border-color:#3291BD; border-style:solid;">'; 
    text += '<tr><td>' + content + '</td></tr></table>'; 
    preview.innerHTML=text; 
    preview.style.visibility='visible';   
}

function hidePreview() { 
  preview.innerHTML=''; 
  preview.style.visibility='hidden'; 
}
</script>
</head>
<body>
<DIV id=preview style="BORDER-RIGHT: 1px; BORDER-TOP: 1px; Z-INDEX: 1; LEFT: 78px; VISIBILITY: hidden; BORDER-LEFT: 1px; WIDTH: 550px; BORDER-BOTTOM: 1px; POSITION: absolute; TOP: 165px; HEIGHT: 62px"></DIV>
레이어에 설명이 나옵니다. <a href="#" onmousemove=setPreviewBox(); onmouseover="showPreview('여기가 설명이 나오는 부분 입니다.<br>어쩌구 저쩌구 http://yesyo.com');return true;" onmouseout="hidePreview(); return true;">여기를 마우스를 올려보세요</a>


3번째 방법 - 첨부파일을 확인하세요

<!-- 풍선도움말 -->
<script type="text/javascript" src="./balloonHint.js"></script>
<div id="balloonHint" style="display:none; width:460px;">
	<table border="0" cellspacing="0" cellpadding="5" bgcolor="#F6F7FE" style="width:460px; border:1px solid #cccbee;">
		<tr><td><span style="font-size:9pt;color:#222085; line-height:140%; ">{{hint}}</span></td></tr>
	</table>
</div>
<script language="javascript">balloonHint("balloonHint")</script>

<a href="#URL" target="_blank" hint="상세 설명입니다.상세 설명입니다.상세 설명입니다.상세 설명입니다.상세 설명입니다.">마우스를 올리시면 상페설명이 나타 납니다.</a>
첨부 파일
파일 종류: gif balloonHint.gif (1.6K, 22 views)
파일 종류: rar balloonHint.rar (1.3K, 6 views)

댓글목록

등록된 댓글이 없습니다.

Total 178건 4 페이지
Javascript 목록
번호 제목 글쓴이 조회 날짜
118 MintState 11173 11-17
117 MintState 7676 11-17
116 MintState 8009 11-17
115 MintState 10469 11-17
열람중 MintState 8242 11-17
113 MintState 10374 11-17
112 MintState 8474 11-17
111 MintState 9578 11-17
110 MintState 10151 11-17
109 MintState 19780 11-17
108 MintState 11741 11-17
107 MintState 8244 11-17
106 MintState 9615 11-17
105 MintState 8823 11-17
104 MintState 8984 11-17
103 MintState 9693 11-17
102 MintState 8844 11-17
101 MintState 13438 11-17
100 MintState 9813 11-17
99 MintState 7327 11-17
게시물 검색
모바일 버전으로 보기
CopyRight ©2004 - 2021, YesYo.com MintState. ™