겉바속촉

[html] 마우스 이벤트 객체, id값 지정한곳에 출력 본문

IT일기(하반기)/HTML

[html] 마우스 이벤트 객체, id값 지정한곳에 출력

겉바속촉 2020. 6. 11. 16:45
728x90
반응형

이번 목표는

1. 마우스 이벤트 객체

2. id값 지정한 곳에 출력해내기

 

 

먼저 마우스 이벤트에 대해서 만들어볼게요:)

사진 두장을 가지고 왔어요!!

candle_off.jpg
0.05MB
candle_on.jpg
0.06MB

 

 

마우스를 올렸을 때, 내렸을 때 

사진에 변화가 오도록 코드를 작성해보려고 합니다:)

이따가 id값에 대해서 만들기 위해 버튼도 미리 작성해두었습니다

 

마우스를 올렸을 때 --> onmouseover

마우스를 내렸을 떄 --> onmouseout

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
	<input type="button" value="click me"
	onclick="">
	<br>
	<div id="out">
	
	</div>
	
	<hr>
	<img alt="" src="../image/candle_on.jpg"
	onmouseover="this.src='../image/candle_off.jpg'"
	onmouseout="this.src='../image/candle_on.jpg'">

</body>
</html>

 

그리고 컴파일 해보시면!!

 

마우스 안 올렸을 때

 

마우스 올렸을 때

 

 

이제 click me 에 대해서 효과주기

촛불 사진 위에 click me라는 button을 아까 만들어두었죠??

그걸 클릭하면

안녕하세요가 뜨게 해볼게요

 

바로 id 지정한 곳에 뜨게 하는 방식입니다:)

 

 

 

 

버튼 누르면!!

다음과 같이 뜨는 게 보이시쥬?!

 

 

이제 만들어봅시다!!

스크립트 작성해주시구요

 test()라는 function을 만들어줍니다:) 

그 안에다가 문구 넣어주신 후에 out.innerHTML=str; 작성해주세요

그리고 우리가 출력하고 싶은 부분에다가

id="out"이라고 해주시는 거죠!

 

 

다음과 같이 위쪽에 있는 out이 바로 아래쪽에 있는 out입니다:)

 

 

전체 코드블럭

 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
	function  test() {
		var str="<font color='red' size='5'>안녕하세요</font>";
		
		out.innerHTML=str;
	}

</script>
</head>
<body>
	<input type="button" value="click me"
	onclick="test()">
	<br>
	<div id="out">
	
	</div>
	
	<hr>
	<img alt="" src="../image/candle_on.jpg"
	onmouseover="this.src='../image/candle_off.jpg'"
	onmouseout="this.src='../image/candle_on.jpg'">

</body>
</html>

 

 

728x90
반응형
저작자표시 비영리 변경금지

'IT일기(하반기) > HTML' 카테고리의 다른 글

[html] function 여러개 만들어서 가져오기  (0) 2020.06.11
[html] onchange로 페이지이동하기  (0) 2020.06.11
[html] 자바스크립트- popup창 생성하기  (0) 2020.06.11
[html] 자바스크립트-수강신청  (0) 2020.06.11
[html]자바스크립트-함수불러오기  (0) 2020.06.11
'IT일기(하반기)/HTML' Related Articles more