웹마스터 팁

  2. Support
  3. 웹마스터 팁

마우스 오버시 텍스트 호버링(주석나타내기..레이어적용)

2012.04.02 22:18

Konghee

<HTML>
 <HEAD><TITLE> 마우스 이벤트(Layer)를 이용한 활용예제 </TITLE>
  <script>
  function View(brdContent)
  {
 // 글내용을 보여줄 레이어 위치 지정
 document.getElementById('content').style.left=event.x+10+document.body.scrollLeft
 document.getElementById('content').style.top=event.y+10+document.body.scrollTop

   //레이어 표시하기
   document.getElementById('content').style.visibility="visible"

  // 레이어 안에 글내용 채우기
    document.getElementById('content').innerText=brdContent
  }

  function hide()
  {
   // 레이어 표시하기
    document.getElementById('content').style.visibility="hidden"
 }

/*
   1. 레이어 객체 만들기
  ① <태그명 id="이름"></태그명>
     ② <태그명 id="이름">   ---- innerText,innerHTML은 사용안됨

   2. 레이어 객체 접근
  ① document.all.레이어 이름
     (document.all은 생략가능)
 
  ② document.all['레이어이름']
     ===>IE에서만 지원(인터넷 익스플로어)
    
  ③ document.layers['레이어이름']
     ===>NE에서만 지원(네스케이프)

     ④ document.getElementById('레이어이름')
  ===>IE,NE모두 지원
-----------------------------------------------------------------------------------------------------------------------------------
   ※ 레이어 속성 활용
 ① 레이어객체.innerText="문자열"
     : 쌍이 존재하는 태그를 사용한 레이어 안에 문자열 삽입
     : <태그명 id="레이어이름">문자열</태그명>
 
 ② 레이어객체.innerHTML="태그문자열"
  : 쌍이 존재하는 태그를 사용한 레이어 안에 태그문자열 삽입
     : <태그명 id="레이어이름">태그가 포함된 문자열</태그명>


*/
  </script>

 </HEAD>

 <BODY>
  <center>
  <div id="content" style="border:1px solid red; font-size:11px; visibility:hidden; background-color='#FFFFCC'" ></div>
  <table width=650 border=1>
   <tr>
  <th>글번호</th>
  <th>글제목</th>
  <th>작성날짜</th>
  <th>작성자</th>
   </tr>

   <tr onmouseover="this.style.backgroundColor='#FFCCCC'" onmouseout="this.style.backgroundColor=''">
   <td align=center>1</td>
   <td style="padding-left:13px;"><A HREF="#" onmouseover="View('30일동안 체계적으로 학습할 수 있다.')"
   onmousemove="View('30일동안 체계적으로 학습할 수 있다.')"onmouseout="hide()">HTML과 자바스크립트 30일 완성</A></td>
   <!-- 셀테두리와 내용사이의 왼쪽간격이 13px; -->
   <td align=center>2007-04-09</td>
   <td align=center>신문섭</td>
   </tr>

   <tr onmouseover="this.style.backgroundColor='#FFCCCC'" onmouseout="this.style.backgroundColor=''">
   <td align=center>2</td>
   <td style="padding-left:13px;"><A HREF="#" onmouseover="View('초보자도 쉽게 따라 할 수 있는 실무예제 중심으로 구성되었다.')" onmousemove="View('초보자도 쉽게 따라 할 수 있는 실무예제 중심으로 구성되었다.')" onmouseout="hide()">Contact ASP3.0</A></td>
   <!-- 셀테두리와 내용사이의 왼쪽간격이 13px; -->
   <td align=center>2007-04-18</td>
   <td align=center>정일섭</td>
   </tr>
 
  </table>
  </center>
 </BODY>
</HTML>


위의 소스는 http://blog.naver.com/PostView.nhn?blogId=sadaudgh&logNo=10019255414 여기서 가져왔어요

이 게시물을
좋아요
목록
제목 글쓴이 날짜
XE에서 신디케이션 제거하기 [1] mAKEkr 2014.06.20
에디터에서 나눔고딕 웹폰트, 기본글꼴로 적용하기(구글API이용) [6] file 애니즌 2014.06.06
관리자페이지에서 콘텐츠->파일 에서 등록된 파일 전체 리스트에 이미지가 바로 나타나도록 [2] sejin7940 2014.06.19
Apache .htaccess 작성요령 [10] 컴매냐 2013.09.19
목록에서 이미지 팝업 이용하기 Happyphp 2014.06.19
include용 파일에는 닫는 php문이 없다? file YJSoft 2014.04.14
레이아웃에 배경이미지 업로드 하고 적용시키기 [1] 웹빌드ver2 2014.06.10
Windows 서버에서 XE 속도 대폭 개선 방법 [29] StyleRoot 2013.02.25
Google Public DNS 강제 Flush Cache 하기 AJKJ 2014.06.08
PHP에서 Socket.IO 서버로 요청 보내기 [3] 이즈야 2014.06.01
윈도우7/8에서네임서버 운영 POSTZI 2014.06.08
XHTML 과 CSS 오류검사를 해주는 사이트 입니다. 디테일 2014.06.07
회원정보에서 '서명' 수정이 반영되지 않을 경우 Novelic 2014.06.03
홈페이지에 접속한 장치의 너비 구하기 [3] CosignStudio 2014.05.28
익스플로러의 자동완성 기능 off 하기 [7] WOWpc 2001.10.23
스크롤바 색깔 바꾸는 스타일... [8] 잔디 2001.01.05
[1초팁] Google Fonts의 폰트파일이 XE템플릿 문법으로 불러와지지 않을때 mAKEkr 2014.05.31
게시판 comment 스타일 수정 웹빌드ver2 2014.05.30
Mysql DB사용량 출력하기 [4] 대류 2012.01.01
유저가 자신의 회원정보 전체를 공개/비공개 설정하게 하는 방법 [2] sejin7940 2014.05.27
태그 쓰기