-
211007_array,animate,image,mouseoverJQuery 2021. 10. 8. 10:16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<style type="text/css">
div.cara {
cursor: pointer;
}
div.carb {
position: absolute;
left: 300px;
top: 80px;
}
</style>
<script type="text/javascript">
$(function () {
//작은 자동차 이미지 넣기..배열로
var s="";
for(var i=1;i<=8;i++)
{
var iname="../car/car_a_0"+i+".PNG"; //편하게 경로를 변수처리
s+="<img src='"+iname+"' class='a'><br>";
}
$("div.cara").html(s);
//큰사진 넣기..b1이미지
$("div.carb").html("<img src='../car/car_b_01.PNG' class='b'>")
//이벤트..mouseover..작은차 이미지에 커서를 두면 해당 차의 큰이미지가 나오게
//다른 작은차 이동할때 큰이미지가 사라지게 효과..fade효과
$("img.a").mouseover(function() {
//현재사진
var smallimg=$(this).attr("src");
//큰사진으로 변경
var largeimg=smallimg.replace('_a_', '_b_');
//현재 자동차사진 사라지게
$("img.b").fadeOut('fast');
//사진교체
$("img.b").attr("src", largeimg);
//fade효과사용
$("img.b").fadeIn('fast');
});
});
</script>
</head>
<body>
<div class="cara"></div>
<div class="carb"></div>
</body>
</html>
기본화면 ------> 작은 이미지에 마우스 올리면 큰이미지가 바뀜 'JQuery' 카테고리의 다른 글
211007_ (0) 2021.10.08 211007_table,click,addClass,removeClass (0) 2021.10.08 211007_animate,z-index (0) 2021.10.08 211007_animate,active,image (0) 2021.10.08 211007_div,z-index (0) 2021.10.07