[jQuery] 이미지를 클릭 시 이미지 변경 예시 / hover함수 사용예시

이미지를 클릭 시 이미지 변경 예시

<h1>room image1</h1>
<img alt="" src="./image/p001.jpg" id="pic">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$(function () {
	let num = 0;
	let imageName = ["p001", "p002", "p003", "p004"];
	$("#pic").click(function() {
		if(num == 3) num=0;
		else 	     num++;	
		$(this).attr("src","./image/"+ imageName[num]+".jpg");
	});
});	
</script>

 

설명

click : 요소를 클릭했을 때 이벤트가 발생하는 함수

이미지를 클릭할 때마다 이미지가 바뀌게 되는 예제이다.

숫자형 변수에 0으로 초기화해주고, 배열에 4장의 이미지를 준비한다.(각 배열의 값은 이미지명으로 초기화해준다.)

id로 접근하여 클릭을 했을 시 함수를 실행하여 준다.

클릭할 때마다 num은 +1씩 증가하고 num이 3이 됐을 때 0으로 초기화를 한다.

this는 #pic을 의미하며 attr() 함수를 사용하여 src의 값을 클릭할 때마다 바꾸어준다.

---

hover함수 사용예시

<h1>room image2</h1>
<img alt="" src="./image/p001.jpg" id="pic">
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script> 
<script type="text/javascript">
$("#pic").hover(
	function () { // mouseover
		$(this).attr("src","./image/p002.jpg");
	},
	function () { // mouseout
		$(this).attr("src","./image/p001.jpg");
	}
);
</script>

 

설명

hover() : 마우스가 요소에 올라왔을 때, 벗어났을 때 이벤트가 발생하는 함수

첫 번째 function () == mouseover (올라왔을 때)

두 번째 function () == mouseout (벗어났을 때)