-
210929_select,image,radioJavaScript 2021. 9. 29. 17:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body*{
font-size: 1.2em;
}
#img{
max-width: 300px;
position: absolute;
left: 500px;
top: 50px;
border: 10px solid orange;
border-radius: 30px;
}
</style>
</head>
<body>
<h2>이미지를 선택하세요</h2>
<select size="1" id="selectimg" onchange="selectImg()">
<option value="../image/02.png">사진1</option>
<option value="../image/03.png">사진2</option>
<option value="../image/04.png">사진3</option>
<option value="../image/05.png">사진4</option>
</select>
<img alt="" src="../image/01.png" id="img">
<br><br>
<h2>선종류를 선택하세요</h2>
<form action="#" id="frm" onclick="selectLine()">
<input type="radio" name="border" value="solid" checked="checked">Solid
<input type="radio" name="border" value="dotted">Dot
<input type="radio" name="border" value="dashed">Dashd
<input type="radio" name="border" value="double">Double
<input type="radio" name="border" value="groove">Groove
<input type="radio" name="border" value="inset">Inset
</form>
</body>
<script type="text/javascript">
var img=document.getElementById("img");
var food=document.getElementById("selectimg");
//사진 변경
function selectImg() {
img.setAttribute("src", selectimg.value);
}
//선 종류 선택
function selectLine() {
img.style.border="10px "+frm.border.value+" orange";
}
</script>
</html>
기본화면 --> 선택시 'JavaScript' 카테고리의 다른 글
210929_jquery,canvas(그림판) (0) 2021.09.29 210929_canvas (0) 2021.09.29 210929_calendar (0) 2021.09.29 210929_form,setInterval (0) 2021.09.29 210928_image,onkeyup(위치변경) (0) 2021.09.28