HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 활용예제 : 버튼 또는 특정 영역에 마우스 오버시 풍선도움말(레이어)를 띄우는 예제
글번호: 236
작성자: 레드플러스
작성일: 2008/11/13 오후 1:50:00
조회수: 7680
파일: Popup.png (1 KB) / 전송수: 1785
Popup.png
<script language="javascript" type="text/javascript">
    /// <summary>
    /// 버튼 또는 특정 영역에 마우스 오버시 풍선도움말(레이어)를 띄우는 예제
    /// </summary>
    
    //풍선 도움말 스크립트
    function sample_string_view(ans, typea) {
        var obj = document.getElementById(typea);
        if (ans) {
            obj.style.top = window.event.clientY + document.body.scrollTop + 10;
            obj.style.left = window.event.clientX + document.body.scrollLeft + 10;
            obj.style.display = "block";
        }
        else {
            obj.style.display = "none";
        }
    }
    function sample_string_move(objName) {
        var obj = document.getElementById(objName);
        if (obj.style.display == "block") {
            obj.style.top = window.event.clientY + document.body.scrollTop + 10;
            obj.style.left = window.event.clientX + document.body.scrollLeft + 10;
        }
    }
</script>
<!-- 풍선도움말 -->
<div id='Memo1' style="display: none; left: 465px; position: absolute; top: 270px">
    <table border="0" cellpadding="0" cellspacing="1" bgcolor="#6bbaef" id="Table1576">
        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="5" bgcolor="#ffffff" width="300" id="Table1576s">
                    <tr>
                        <td align="JUSTIFY">
                            이곳에 내용이 들어옵니다.                                
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>
<!-- /풍선도움말 -->
<input type="button" value="마우스를 올려보세요."
    onmouseover="sample_string_view(true, 'Memo1');"
    onmousemove="sample_string_move('Memo1');"
    onmouseout="sample_string_view(false,'Memo1');" />
 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 활용예제 : select/otion 항목 중 반드시 선택하도록... SelectOption.png(6 KB) 레드플러스 2008-11-14 3586
현재글 활용예제 : 버튼 또는 특정 영역에 마우스 오버시 풍선도움말(레이어)를 띄우는 예제 Popup.png(1 KB) 레드플러스 2008-11-13 7680
다음글 활용예제 : 레이어(div)를 보였다 안 보였다를 반복 - 레드플러스 2008-11-04 4689
 
손님 사용자 Anonymous (손님)
로그인 Home