[javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경
<head> 와 </head> 사이에 입력
<script language="JavaScript"> <!-- pic0 = new Image(); pic0.src = "insert0.jpg"; pic1 = new Image(); pic1.src = "insert1.jpg"; pic2 = new Image(); pic2.src = "insert2.jpg"; pic3 = new Image(); pic3.src = "insert3.jpg"; // --> </script> |
<body> 와 </body> 사이에 입력
<table> <tr> <td> <a href="" onmouseover="document.images.text.src=pic1.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="1.jpg" border="0"></a> <a href="" onmouseover="document.images.text.src=pic2.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="2.jpg" border="0"></a> <a href="" onmouseover="document.images.text.src=pic3.src" onmouseout="document.images.text.src=pic0.src" target="_top"><img src="3.jpg" border="0"></a> </td> </tr> <tr> <td id="textbox"> <img src="insert0.jpg" name="text" border="0"> </td> </tr> </table> |
1.jpg 나 2.jpg 나 3.jpg 에 마우스를 올리면 별도의 위치에 insert1.jpg, insert2.jpg, insert3.jpg 이미지가 뜹니다.
그리고 마우스가 위치를 벗어나면 insert0.jpg 기본 이미지 출력됩니다.
'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글
| [JavaScript] 이미지를 방향키로 움직일 수 있고, 좌표가 표시됩니다. (0) | 2015.01.27 |
|---|---|
| 라디오버튼 클릭시 input 박스 활성화 시키기 (0) | 2015.01.27 |
| [html] a 태그 밑줄 없애기 (0) | 2015.01.27 |
| [html] 테이블 테두리 얇게하기 (0) | 2015.01.27 |
| [html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정) (0) | 2015.01.27 |
