Daily coding

Java Script : 예제10 - select 태그로 링크 이동 및 외부 이미지 끌어오기 본문

Front-end/Java Script

Java Script : 예제10 - select 태그로 링크 이동 및 외부 이미지 끌어오기

sunnnkim 2020. 1. 9. 20:03 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="black" text="white">
<h1>사진들</h1>
<table>
<tr>
	<td>
	<img alt="" src="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82537/82537_320.jpg" style="background-color: #F5DA81; margin-right: 10px;padding: 10px;" align="left"
				id="imgtag">
	</td>
 	<td valign="top" style="padding-left: 10px">
		<form name="frm">
		영화 선택 <br>
		<select id="sel" name="picture" onchange="func();">
			<option>영화제목</option>
			<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82537/82537_320.jpg">스타워즈</option>
			<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82531/82531_320.jpg">닥터 두리틀</option>
			<option value="http://img.cgv.co.kr/Movie/Thumbnail/Poster/000082/82747/82747_320.jpg">백두산</option>
		</select>
		</form>
	</td>
</tr>

</table>





<script type="text/javascript">
function func() {
	var index = document.frm.picture.selectedIndex;
	if(index != 0){
	var srcurl = document.frm.picture.options[index].value;
	document.getElementById("imgtag").src=srcurl;

	}
}

</script>


</body>
</html>

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제9 - 포털사이트 링크 연결하기  (0) 2020.01.09
Java Script : 예제8 - element 생성해서 테이블 만들기  (0) 2020.01.09
Java Script : 예제7 - 테이블 및 배열로 계산하기  (0) 2020.01.09
Java Script : 예제6 - 마우스이벤트(onmouseover)  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
'Front-end/Java Script' Related Articles more