웹마스터 팁
링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..)
2002.05.19 15:08
예제: http://yoonmi.net/study/study46.htm
○ pic0.src = "img1.gif"; // 기본 그림
○ pic1.src = "img2.gif"; // 문구에 마우스 오버시 나타날 두 번째 그림
좀더 링크 시킬 문구와 변할 그림을 늘리고 싶다면, 숫자만 하나씩 올려서 추가해주면 되겠죠.
예를 들어.
....
pic1 = new Image();
pic1.src = "img2.gif";
pic2 = new Image();
pic2.src = "img3.gif";
.....
이런식으로요.
물론, 밑에 바디 부분도 추가해 주는 것은 당연합니다. img1.gif 부분은 처음 나올 그림 주소쓰구요.
링크할 주소, 링크시킬 문구 도 적절히 변혀 시켜주세요.
만약 위에 처럼 이미지 변경을 하나더 추가했다면
<td valign="center">
<a href="링크할 주소" onmouseover="document.images.text.src=pic2.src" onmouseout="document.images.text.src=pic0.src" target="_top">링크시킬 문구 2, 3, ....</a>
</td>
요걸 반복해 주면 됩니다.
<head> 와 </head> 사이에 입력하세요.
/////////////////////////////
<script language="JavaScript">
<!--
pic0 = new Image();
pic0.src = "img1.gif";
pic1 = new Image();
pic1.src = "img2.gif";
// -->
</script>
///////////////////////////////////
<body> 와 </body>사이에 추가해주세요.
///////////////////////////////////
<table>
<tr>
<td id="textbox" align="center" >
<img src="img1.gif" name="text" border="0"></td>
<td valign="center">
<a href="링크할 주소" onmouseover="document.images.text.src=pic1.src" onmouseout="document.images.text.src=pic0.src" target="_top">링크시킬 문구</a>
</td>
</tr>
</table>
//////////////////////////////////
○ pic0.src = "img1.gif"; // 기본 그림
○ pic1.src = "img2.gif"; // 문구에 마우스 오버시 나타날 두 번째 그림
좀더 링크 시킬 문구와 변할 그림을 늘리고 싶다면, 숫자만 하나씩 올려서 추가해주면 되겠죠.
예를 들어.
....
pic1 = new Image();
pic1.src = "img2.gif";
pic2 = new Image();
pic2.src = "img3.gif";
.....
이런식으로요.
물론, 밑에 바디 부분도 추가해 주는 것은 당연합니다. img1.gif 부분은 처음 나올 그림 주소쓰구요.
링크할 주소, 링크시킬 문구 도 적절히 변혀 시켜주세요.
만약 위에 처럼 이미지 변경을 하나더 추가했다면
<td valign="center">
<a href="링크할 주소" onmouseover="document.images.text.src=pic2.src" onmouseout="document.images.text.src=pic0.src" target="_top">링크시킬 문구 2, 3, ....</a>
</td>
요걸 반복해 주면 됩니다.
<head> 와 </head> 사이에 입력하세요.
/////////////////////////////
<script language="JavaScript">
<!--
pic0 = new Image();
pic0.src = "img1.gif";
pic1 = new Image();
pic1.src = "img2.gif";
// -->
</script>
///////////////////////////////////
<body> 와 </body>사이에 추가해주세요.
///////////////////////////////////
<table>
<tr>
<td id="textbox" align="center" >
<img src="img1.gif" name="text" border="0"></td>
<td valign="center">
<a href="링크할 주소" onmouseover="document.images.text.src=pic1.src" onmouseout="document.images.text.src=pic0.src" target="_top">링크시킬 문구</a>
</td>
</tr>
</table>
//////////////////////////////////
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 자동 팝업창띠우기 소스 [4] | 이슈™ | 2002.03.13 |
:: DB 필요없는 일정관리 .. 거창하게.. -.-
[2]
 | 고전지기 | 2002.03.15 |
| [자바스트립트]bidoo님의 레벨메타식 체크박스 보강 | 탐그루 | 2002.03.20 |
| 다이나믹 HTML 스크립트 - 간편 공지사항에.... [1] | ▩윤미 | 2002.03.28 |
| 레이어의 상대위치 지정 방법(position:absolute에서...) [2] | Legend | 2002.03.29 |
| [v]운영 체제별 다른 페이지 보여주기 -_-;v [3] | ┏ⓩZion┛ | 2002.03.30 |
| [v]하나더! 해상도별 다른 페이지 보여주기 | :+:zZion:+: | 2002.03.30 |
| [v]최근 업데이트 시간을 자동으로 나타내 보자! [3] | :+:zZion:+: | 2002.03.30 |
| 배너 링크를 바로 클립보드로 카피하기 [5] | Legend | 2002.04.01 |
| 조그만한창 열기. ^.^ [5] | 아이쿠 | 2002.04.02 |
| 배너 링크를 바로 클립보드로 카피하기(Legend님꺼 보충) [3] | 카멜롯™ | 2002.04.04 |
| 자바스크립트 실행시점 | Jacylee | 2002.04.11 |
| 이미지 오버랩 (속도 조절 가능, 이미지 갯수 제한 없음) [8] | 조해성 | 2002.04.25 |
| 웹브라우저, 언어, 운영체제 보여주기.. [3] | 이동기 | 2002.04.29 |
| 타이틀바 도, 움직인다! 캬하! (상태바 아님) [10] | ▩윤미 | 2002.05.06 |
| 자바로 만든 퍼즐 겜^^; [8] | ☆봄비ㆀ | 2002.05.11 |
| 텍스트박스안에서 춤추는글자 [1] | Anice | 2002.05.16 |
| 글자가 커졌다가 작아졌다가.. [1] | Anice | 2002.05.17 |
| 링크된 텍스르 마우스 오버시 그림이 변한다.(메뉴로도..) [1] | ▩윤미 | 2002.05.19 |
| 폼안의 텍스트 입력시 실시간 카운팅 ? [8] | 카멜롯™ | 2002.05.20 |