웹마스터 팁

  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 여기서 가져왔어요

이 게시물을
좋아요
목록
제목 글쓴이 날짜
[HTML 초보자] 테이블 태그에 색상 넣기!! 퍼펙트1 [2] ZipShin 2002.09.19
[Tip]한글 97로 홈페이지 틀 짜기 [8] file Alunar 2002.09.21
소스 보는 방법 몇가지 [13] 태영이 2002.09.24
테이블 크기 더 이상 안넘어가게 하기.. [12] dEathrock 2002.09.24
(허접 팁)레이어를 브라우저 크기에 상관없이 위치지정하기 [6] 오영민 2002.09.25
벅스에서 음악주소 얻어내기 총정리!!! [11] 세DlCIZLOI너 2002.09.25
CSS,HTML,DHTML 및 기타 최신레퍼런스를 구하는 방법 [2] -크크크- 2002.09.28
스크롤바를 이용하지 않고 페이지내에서 원하는 위치로 이동하기 [10] 유지호 2002.09.28
HTML 이란? [5] 조현원 2002.09.28
[HTML 초보자] 테이블 태그에 색상 넣기!! 퍼펙트2 [5] ZipShin 2002.10.01
HTML의 4가지 요소 [2] ZipShin 2002.10.01
프레임셋 응용 [8] 심플리즘 2002.10.08
[HTML 초보자]- marquee태그 (글자 움직이기)-1 [6] ZipShin 2002.10.11
부모-자식 레이어의 활용(레이어 위치 고정) [8] clo 2002.10.12
[HTML 초보자]- marquee태그 (글자 움직이기)-2 [5] ZipShin 2002.10.12
[HTML 초보자] 마퀴태그로 움직이되, 마우를 가져다 되면 멈추고, 시작되고.. [6] ZipShin 2002.10.17
[HTML 초보자]-marquee 마퀴태그의 움직이는 속도 [5] ZipShin 2002.10.20
[HTML 초보자]- 글자가 움직이는 배경색깔 [1] ZipShin 2002.10.22
오른쪽마우스, 드래그 금지하는 태그.. [4] xtersh 2002.10.24
뽀유의 스타일시트 특별강좌 [28] 뽀유♡ 2002.10.25
태그 쓰기