Daily coding

Java Script : 예제6 - 마우스이벤트(onmouseover) 본문

Front-end/Java Script

Java Script : 예제6 - 마우스이벤트(onmouseover)

sunnnkim 2020. 1. 9. 19:53 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
td{
padding: 10px;
}

</style>
</head>
<body bgcolor="#000000" text="white">
<h1>풍경사진</h1>
※ 이미지 위로 마우스를 이동하면 그 이미지가 컬러로 표시됩니다.
<br>
<table>
<tr>
	<td><img alt="" src="./images/m_nature01.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
	<td><img alt="" src="./images/m_nature02.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
	<td><img alt="" src="./images/m_nature03.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
</tr>
<tr>
	<td><img alt="" src="./images/m_nature04.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
	<td><img alt="" src="./images/m_nature05.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
	<td><img alt="" src="./images/m_nature06.jpg" onmouseover="colorPic(this)" onmouseout="greyPic(this)"></td>
</tr>
</table>

<script type="text/javascript">
function colorPic( obj ) {
	var selectimg = obj.src;
	var imgnum = selectimg.charAt(selectimg.length-5);
	console.log(imgnum);
	selectimg = "./images/nature0"+imgnum+".jpg";
	obj.src = selectimg;
}
function greyPic( obj ) {
	var selectimg = obj.src;
	var imgnum = selectimg.charAt(selectimg.length-5);
	console.log(imgnum);
	selectimg = "./images/m_nature0"+imgnum+".jpg";
	obj.src = selectimg;
}

</script>



</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제8 - element 생성해서 테이블 만들기  (0) 2020.01.09
Java Script : 예제7 - 테이블 및 배열로 계산하기  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
Java Script : 예제4 - 랜덤하게 주사위 돌리기  (0) 2020.01.09
Java Script : 예제3 - select 태그를 사용하여 링크 이동  (0) 2020.01.09
'Front-end/Java Script' Related Articles more