<!DOCTYPE html>
<html>
<head>
<style>
img{
width: 100px;
height: 100px;
}
</style>
<link rel="stylesheet" href="../CSS/public.css">
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://localhost/Jqpro/js/jquery-3.7.1.js"></script>
<script>
$(function(){
let oldimg = "";
$(document).on('mouseover','img',function(){
// oldimg 저장 mouseout시 사용
oldimg = $(this).attr('src');
let end = oldimg.lastIndexOf("/")+1;
let vsrc = oldimg.slice(0,end) + $(this).attr('temp');
$(this).attr('src',vsrc);
})
$(document).on('mouseout','img',function(){
$(this).attr('src',oldimg);
})
$(document).on('dblclick','img',function(){
$(this).hide();
// 다사라졌나 확인
if($('img:visible').length<1){
//보이기 버튼 생성
$('<input type="button" value="보이기" id="show">').appendTo($('#result1'));
}
})
$(document).on('click','#show',function(){
$('img').show();
$(this).remove();
})
})
</script>
</head>
<body>
<div class="box">
<h3>mouseover: 다른 이미지로 변경<br>
mouseout : 원래이미지가 표시<br>
dblclick : 이미지가 사라진다<br>
이미지가 다 사라지면_보이는 이미지의 갯수가 0개이면 - 보이기 버튼을 표시 (disble 필터)</h3>
<div id="result1">
<img alt="국화1.jpg" src="../images/국화1.jpg" temp="국화2.jpg">
<img alt="수국1.jpg" src="../images/수국1.jpg" temp="수국2.jpg">
<img alt="image.1.jpg" src="../images/image.1.jpg" temp="image.2.jpg">
<img alt="image.1.jpg" src="../images/풍차.jpg" temp="클라우드.png">
<img alt="image.1.jpg" src="../images/단풍.jpg" temp="산.png">
</div>
</div>
</body>
</html>
