728x90
배열과 이미지 객체를 사용한 앨범 만들기
[실습예제]
| <html> <head> <title> </title> </head> <script language="javascript"> arry=new Array() arry[0]=new Image() arry[1]=new Image() arry[2]=new Image() arry[3]=new Image() arry[0].src="./img/mark5_6.gif" arry[1].src="./img/no.gif" arry[2].src="./img/ok.gif" arry[3].src="./img/lover.jpg" function im_over(n){ document.first.src=arry[n].src } </script> <body> <b><h3>onmouseover</h3></b><p> <img src="./img/lover.jpg" width=400 height=300 name=first><p> <img src="./img/mark5_6.gif" onmouseover="im_over(0)"> <img src="./img/no.gif" onmouseover="im_over(1)"> <img src="./img/ok.gif" onmouseover="im_over(2)"> <img src="./img/lover.jpg" width=50 height=50 onmouseover="im_over(3)" > </body> </html> |
Event 객체
발생한 이벤트에 대한 정보를 기억하고 있는 객체. IE 계열과 비IE 계열의 사용법이 다르다.
| IE | window.event |
| 비 IE | function func(e) |
주요 속성
| altKey | alt 키를 눌렀을 때 발생 합니다. |
| altLeft | 왼쪽 alt키를 눌렀을 때 발생 합니다. |
| button | 마우스 버튼을 눌렀을 때 발생 합니다. (1=왼쪽, 2=오른쪽, 3=양쪽) |
| clientX | 윈도우에서 실제 데이터 영역을 기준으로 마우스의 x좌표의 위치를 알려줍니다. |
| clientY | 윈도우에서 실제 데이터 영역을 기준으로 마우스의 y좌표의 위치를 알려줍니다. |
| ctrlKey | ctrl키를 눌렀을 때 발생 합니다. |
| ctrlLeft | 왼쪽 ctrl키를 눌렀을 때 발생 합니다. |
| shiftKey | shift키를 눌렀을 때 발생 합니다. |
| shiftLeft | 왼쪽 shift키를 눌렀을 때 발생 합니다. |
| srcElement | 이벤트를 발생한 객체를 설정 합니다. |
| type | 이벤트 객체의 이벤트 이름을 설정 합니다. |
| x | 선택한 객체의 x 좌표를 위치를 알려줍니다. |
| y | 선택한 객체의 y 좌표를 위치를 알려줍니다. |
[간단예]
| <html> <head> <title> Event </title> <script language="JavaScript"> window.onload = function(){ document.frm.btn.onclick=func; } function func(ev){ e = ev || window.event; document.frm.result.value = e.srcElement.name + "\n"; document.frm.result.value += e.x + "\n"; document.frm.result.value += e.y + "\n"; document.frm.result.value += e.type + "\n"; } </script> </head> <body> <form name="frm"> <input type="button" value="click" name="btn"><br>> <textarea rows=10 cols=50 name="result"></textarea> </form> </body> </html> |
728x90
댓글