레이어에 도움말을 표시
로빈아빠
본문
레이어에 도움말을 표시
아래 스크립트를 확인하세요.
1번째 방법
2번째 방법
3번째 방법 - 첨부파일을 확인하세요
아래 스크립트를 확인하세요.
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>관련링크
댓글목록
등록된 댓글이 없습니다.