1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body bgcolor="black"> <div align="center"> <font color="white"> <h2>풍경사진</h2> ※이미지 위로 마우스를 이동하면 그 이미지가 컬러로 표시됩니다. <br><br> </font> <!-- 테이블로 응용 가능 --> <img alt="이미지 없음" id="img1" src="m_nature01.jpg" onmouseover="over('img1','nature01.jpg')" onmouseout="out('img1','m_nature01.jpg')"> <img alt="이미지 없음" id="img2" src="m_nature02.jpg" onmouseover="over('img2','nature02.jpg')" onmouseout="out('img2','m_nature02.jpg')"> <img alt="이미지 없음" id="img3" src="m_nature03.jpg" onmouseover="over('img3','nature03.jpg')" onmouseout="out('img3','m_nature03.jpg')"> <br><br> <img alt="이미지 없음" id="img4" src="m_nature04.jpg" onmouseover="over('img4','nature04.jpg')" onmouseout="out('img4','m_nature04.jpg')"> <img alt="이미지 없음" id="img5" src="m_nature05.jpg" onmouseover="over('img5','nature05.jpg')" onmouseout="out('img5','m_nature05.jpg')"> <img alt="이미지 없음" id="img6" src="m_nature06.jpg" onmouseover="over('img6','nature06.jpg')" onmouseout="out('img6','m_nature06.jpg')"> </div> <script type="text/javascript"> function over(id,img) { document.getElementById(id).src = img; } function out(id,img) { document.getElementById(id).src = img; } </script> </body> </html> | cs |
onmouseover - > 마우스가 위로 올라왔을 때 이벤트 발생
onmouseout - > 마우스가 영역을 벗어났을 때 이벤트 발생
'IT Study > Web' 카테고리의 다른 글
| [JavaScript] 기본 문법 - Node관련 예제 (0) | 2018.08.06 |
|---|---|
| [JavaScript] 기본 문법 - key이벤트, mouse이벤트, onBlur (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - Math.random 응용 (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - select 링크 (0) | 2018.08.06 |
| [JavaScript] 응용 예제 - string (0) | 2018.08.06 |