본문 바로가기

StoreHouse/Html

Html MouseOverImage 변환하기

이 홈페이지 메뉴에서 볼수 있듯이, 이미지에 커서를 대면 다른 이미지로 변환되고 상태바에 해당 메시지를 보낸다. 이 것을 만들어 주는 소스이다.
_____________________________________________________________
[CODE] --------------->(1) -------------->(2) [/CODE]
_____________________________________________________________
(1)은 index.html에 링크가 걸린 문서, OnMouseOver는 마우스가 이미지 위에 올라왔을 때를 각각 의미한다. window.status는 상태바에 나타날 메시지.document.images[0].
src 는 해당 문서에서 사용되는 첫번째 이미지이다. 두번째 이미지에서 바뀌게 하고 싶으면 document.images[1].src, 즉 첫번째는 0, 두번째는 1과 같은 식으로 정렬해준다. return true는 상태바에 메시지를 출력한다는 의미이다. 즉, onMouseOver일 경우 출력될 메시지를 true로 반환시켜 출력하는 것이다. 빠트리면 링크될 문서가 그대로 상태바에 나타난다.
(2)이 이미지에 링크를 걸고 마우스를 가져가면, t1.jpg라는 이미지를 불러온다.

출처 -http://cyber.chongju.ac.kr/~coobeat/