211007_table,click,addClass,removeClass
<!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">
table {
border-collapse: collapse;
}
td {
border: 1px solid gray;
}
.small img{
width: 80px;
height: 100px;
}
.large{
width: 280px;
height: 330px;
}
p {
font-weight: bold;
}
.select{
background-color: #ffffe0;
color: gray;
font-size: 1.2em;
}
</style>
<script type="text/javascript">
$(function () {
$("a.small").click(function(e) {
//기본이벤트(링크되는거)를 무효화
e.preventDefault();
//td에 select클래스를 추가
$(this).parent().addClass("select");
//이전에 다른 td에 추가된 select는 제거..
$(this).parent().parent().siblings().find("td").removeClass("select");
//현재 선택한 값을 찾아서 large클래스에 넣어주기
//현재 이미지명 얻기
var imgsrc=$(this).attr("href"); //small사진이 a태그이므로 a태그경로
$(".large").fadeTo('slow', 0, function () {
$(this).attr("src", imgsrc); //큰사진은 img경로
}).fadeTo('slow',1);
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="150" align="center">
<a href="../cat/cat7.JPG" class="small">
<img alt="" src="../cat/cat7.JPG"></a>
<p>림짱</p>
</td>
<td rowspan="4" width="350" align="center">
<img alt="" src="../cat/cat7.JPG" class="large">
</td>
</tr>
<tr>
<td width="150" align="center">
<a href="../cat/cat8.JPG" class="small">
<img alt="" src="../cat/cat8.JPG"></a>
<p>요다</p>
</td>
</tr>
<tr>
<td width="150" align="center">
<a href="../cat/cat13.jpg" class="small">
<img alt="" src="../cat/cat13.jpg"></a>
<p>루크</p>
</td>
</tr>
<tr>
<td width="150" align="center">
<a href="../cat/cat1.JPG" class="small">
<img alt="" src="../cat/cat1.JPG"></a>
<p>요다</p>
</td>
</tr>
</table>
</body>
</html>
