JAVA_EE/JQuery

[21.10.14] exam05(03_jQueryAttr) - 이미지 위에 마우스 올려놨을 때 이미지 변경

luvforjunk 2021. 10. 14. 12:12
728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul {
	padding: 0;
	margin: 0;
	width: 670px;
	list-style: none;
}

li {
	float: left;
}

ul:after {
	content: '';
	display: block;
	float: none;
	clear: both;
}

img {
	border: none;
}
</style>
</head>
<body>
	<ul>
		<li><a href="#"><img src="../img/jquery.jpg" alt="jQuery" /></a></li>
		<li><a href="#"><img src="../img/javascript.jpg" alt="Javascript" /></a></li>
		<li><a href="#"><img src="../img/css.jpg" alt="CSS" /></a></li>
		<li><a href="#"><img src="../img/html.jpg" alt="HTML" /></a></li>
        <!-- img태그에서의 alt는 이미지를 대체하는 텍스트이다 -->
	</ul>

	<script type="text/javascript"
		src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript">
	
	// img 태그의 alt="jQuery"에 마우스가 올라가면 이미지 jquery_on.jpg로 바꾸시오.
	// 올라가지 않으면 이미지 jquery.jsp로 바꾸시오
		$(function() {
			$('img[alt="jQuery"]').hover(function() {
				$(this).attr('src', "../img/jquery_on.jpg");
			}, function() {
				$(this).attr('src', "../img/jquery.jpg");
			});

			$('img[src="../img/javascript.jpg"]').hover(function() {
				$(this).attr('src', "../img/javascript_on.jpg");
			}, function() {
				$(this).attr('src', "../img/javascript.jpg");
			});

			$('img[src="../img/css.jpg"]').hover(function() {
				$(this).attr('src', "../img/css_on.jpg");
			}, function() {
				$(this).attr('src', "../img/css.jpg");
			});

			$('img[src="../img/html.jpg"]').hover(function() {
				$(this).attr('src', "../img/html_on.jpg");
			}, function() {
				$(this).attr('src', "../img/html.jpg");
			});
		});
	</script>
</body>
</html>

 

// img 태그의 alt="jQuery"에 마우스가 올라가면 이미지 jquery_on.jpg로 바꾸시오.
// 올라가지 않으면 이미지 jquery.jsp로 바꾸시오

~문제를 풀 땐 

$(function() {
	$('').hover(function(){}, function(){});
});

이런식으로 처음에 큰 틀을 먼저 잡고 시작하는 것이 좋다

 

 

 

 

[결과]

 

728x90
반응형