[자바스크립트 기초] 마우스 오버 및 클릭 했을때, 글씨 및 이미지변환 태그 알아보기
[자바스크립트 기초] 마우스 오버 및 클릭 했을때, 글씨 및 이미지변환 태그 알아보기
자바스크립트에 대해서 조금씩 재미를 찾고 있습니다.
물론...쉽진 않습니다만...그렇다고 손 놓기에는 너무 아까운지라~!
일단, 무조건 따라하고, 눈에 익히자! 라고 마음먹고 시작했는데
잠시 초심을 잃다가...다시 시작했어요. 그랬더니
조금씩 눈에 들어오기 시작했어요^^;
이번시간엔, 마우스 이벤트들에 대해서 알아볼께요~!
그...왜 이미지위에 마우스가 올라가면 그림이 바뀐다거나,
마우스 커서가 빠지면, 다시 원래대로 돌아오거나~ 그런 여러 이벤트들 있지요???
의외로 쉬운 자바스크립트 태그를 구성해서 꾸밀 수 있어요^^
자~ 그러면 한번 알아보도록 하자구요.
우선, 스타트는 아시죠???
도쿠먼트로 시작해서~~~ 이렇게 하구~~
스타일안에는, 아래쪽에 ID 값에 대한 이름을 준 것에 대해서,
보더값을 5픽셀짜리 도트 녹색으로 주고, 크기는 500X200 짜리로 만들었어요.
그리고, 바디쪽 보시면, 아까 그 아이디가 바로 이 부분인데요,
H1 태그에, ID를 부여했고, 보시면, 온마우스오버, 온마우스아웃, 온마우스다운~ 온클릭 등등~
여러가지 명령태그가 있습니다.
이렇게 되어있으니, 이것을 참고하세요^^
그리고, 마우스 이벤트 명령어는 바디 본문에 작성을하며,
ID를 부여해서, 헤드안에 스크립트를 구성해서 표현을 하면 되는것이죠^^
자, 그러면 이렇게 진행이 되게 됩니다^^;
하하하~!
초기화 버튼은 신경 안쓰셔도 됩니다. 그냥 있는거에요~!
(사실 만드는 방법을 나중에 한번더 설명하기 위함...ㅋ)
이번에는 사진으로 해볼께요!
대략, 두개의 이벤트를 만들어봤습니다.
그러면, 각자 펑션에 이름을 주고, 저런 구조로 작동이 되게 되는 것입니다.
녹색이 바로, div의 스타일을 설정해준 부분이고,
빨간 부분이 마우스가 오버되고 나올때의 변화에 대한 자바스크립트를 구성한 부분이죠.
그리고, 위치에다가 사진들을 잘 모아두고,
경로를 잘 지정해 줘야합니다.
자바스크립트에서는 오타가 조금이라도 발생하면
아무것도 나오지 않아요~!
이렇게 마우스가 올라가면 사진이 바뀌게 되지요^^;
빠지면 다시 원래대로 돌아오구요~!
이 마우스 커서가 저기 여자친구.jpg 안으로 들어가면,
드림하이.jpg 로 바뀌는 것이죠잉~!
자~ 이렇게 해서, 마우스 오버나 클릭시에도 변화를 줄 수 있으니,
한번 직접 메모패드에 작성을 하셔서 한번 우선 똑같이 써보시구,
그다음에 응용을 한번 진행해 보세요~!
