211005_form,change,click
<!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.right {
position: absolute;
left: 300px;
border: 10px solid gray;
padding: 20px;
}
</style>
</head>
<body>
<div class="right">
<img alt="" src="../cat/cat1.JPG" style="max-width: 200px;">
</div>
<div class="left">
<b>이미지 선택</b>
<select id="selImage">
<option value="../cat/cat2.JPG">이미지1</option>
<option value="../cat/cat3.JPG">이미지2</option>
<option value="../cat/cat4.JPG">이미지3</option>
<option value="../cat/cat5.JPG">이미지4</option>
<option value="../cat/cat6.JPG">이미지5</option>
</select>
<br><br>
<h4>테두리선 선택</h4>
<input type="radio" name="line" value="solid">실선
<input type="radio" name="line" value="dotted">점선
<input type="radio" name="line" value="dashed">파선
<input type="radio" name="line" value="groove">입체선
<br><br>
<b>박스그림자</b>
<input type="checkbox" id="shadow">그림자 넣기
</div>
<script type="text/javascript">
//이미지 선택하면 change이벤트
$("#selImage").change(function() {
//현재 내가 선택한 이미지
/* var im=$(this).val();
$("div.right img").attr("src", im); 아래처럼 한줄로도 가능*/
$("div.right img").attr("src", $(this).val());
});
//테두리선 선택시 click이벤트..border-style변경
$("input[name='line']").click(function() {
$("div.right").css("border-style", $(this).val());
});
//그림자 선택시 click이벤트..box-shadow 5px 5px orange..선택 안 했을 땐 공백으로
$("#shadow").click(function() {
//체크했을때, 안 했을 때
if($(this).is(":checked")){
$("div.right").css("box-shadow", "5px 5px orange");
} else {
$("div.right").css("box-shadow", "");
}
});
</script>
</body>
</html>
