728x90
반응형
반반 피자 만들기 프로젝트
오늘은 쌤이 숙제로 사용자가 selsct 박스를 선택하면 그 값에 따라서 이미지 변경을 주는 것을 해보라고 하셨다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[pizza_form.html]</title>
<style type="text/css">
*{ font-size:14pt; font-weight:bold; }
.relative {
position: relative;
width: 427px;
height: 180px;
background-image: url('pizza_images/bgpizza.jpg');
background-position: top left;
}
.absolute {
position: absolute;
top: 0;
right: 0;
width: 213px;
height: 180px;
background-image: url('pizza_images/bgpizza.jpg');
background-position: top right;
}
</style>
<script type="text/javascript">
function changePizzaL(name) {
document.getElementById("preview_l").style.backgroundImage = "url('pizza_images/"+ name +".jpg')";
}
function changePizzaR(name) {
document.getElementById("preview_r").style.backgroundImage = "url('pizza_images/"+ name +".jpg')";
}
</script>
</head>
<body>
<div id="preview_l" class="relative">
<div id="preview_r" class="absolute"> </div>
</div>
<p>
<form action="" method="post">
<select name="pizzaListLeft" onchange="changePizzaL(this.value)">
<option value="bgpizza" selected="selected">피자를 선택하세요</option>
<option value="dw_d">도이치휠레 더블치즈엣지</option>
<option value="dw">도이치휠레</option>
<option value="rb_d">리얼바비큐 더블치즈엣지</option>
<option value="rb">리얼바비큐</option>
<option value="qcc_d">베이컨체더치즈 더블치즈엣지</option>
<option value="bcc">베이컨체더치즈</option>
<option value="bgg_d">불고기 더블치즈엣지</option>
<option value="bgg">불고기</option>
<option value="bp">브레이즈드 포크</option>
<option value="sd_d">슈퍼디럭스 더블치즈엣지</option>
<option value="sd">슈퍼디럭스</option>
<option value="ss_d">슈퍼슈프림 더블치즈엣지</option>
<option value="ss">슈퍼슈프림</option>
<option value="wnb">와규 앤 비스테카</option>
<option value="fs">직화 스테이크</option>
<option value="cp">치즈피자</option>
<option value="cp_d">치즈피자 더블치즈엣지</option>
<option value="ks">킹프론 씨푸드</option>
<option value="ppr_d">페퍼로니 더블치즈엣지</option>
<option value="ppr">페퍼로니</option>
<option value="pt_d">포테이토 더블치즈엣지</option>
<option value="pt">포테이토</option>
</select>
<select name="pizzaListRight" onchange="changePizzaR(this.value)">
<option value="bgpizza" selected="selected">피자를 선택하세요</option>
<option value="dw_d">도이치휠레 더블치즈엣지</option>
<option value="dw">도이치휠레</option>
<option value="rb_d">리얼바비큐 더블치즈엣지</option>
<option value="rb">리얼바비큐</option>
<option value="qcc_d">베이컨체더치즈 더블치즈엣지</option>
<option value="bcc">베이컨체더치즈</option>
<option value="bgg_d">불고기 더블치즈엣지</option>
<option value="bgg">불고기</option>
<option value="bp">브레이즈드 포크</option>
<option value="sd_d">슈퍼디럭스 더블치즈엣지</option>
<option value="sd">슈퍼디럭스</option>
<option value="ss_d">슈퍼슈프림 더블치즈엣지</option>
<option value="ss">슈퍼슈프림</option>
<option value="wnb">와규 앤 비스테카</option>
<option value="fs">직화 스테이크</option>
<option value="cp">치즈피자</option>
<option value="cp_d">치즈피자 더블치즈엣지</option>
<option value="ks">킹프론 씨푸드</option>
<option value="ppr_d">페퍼로니 더블치즈엣지</option>
<option value="ppr">페퍼로니</option>
<option value="pt_d">포테이토 더블치즈엣지</option>
<option value="pt">포테이토</option>
</select>
<fieldset>
<legend>필수항목입력</legend>
<p><label>고객명 <input></label></p>
<p><label>전화번호 <input type="tel"></label></p>
<p><label>E-mail <input type="email"></label></p>
</fieldset>
<br>
<fieldset>
<legend>피자 사이즈</legend>
<p><label><input type="radio" name="size">Small</label></p>
<p><label><input type="radio" name="size">Medium</label></p>
<p><label><input type="radio" name="size">Large</label></p>
</fieldset>
<br>
<fieldset>
<legend>토핑 선택</legend>
<p><label><input type="checkbox">베이컨</label></p>
<p><label><input type="checkbox">치즈</label></p>
<p><label><input type="checkbox">양파</label></p>
<p><label><input type="checkbox">버섯</label></p>
</fieldset>
<p>
<label>희망배송시간
<input type="time" min="10:00" max="22:00" step="900">
</label>
</p>
<p>
<label>배송시요청사항
<textarea name="comments" maxlength="1000" rows="2" cols="30" style="vertical-align:middle; resize:none;">
</textarea>
</label>
</p>
<p><button>피자주문하기</button></p>
</form>
</body>
</html>
이렇게 아무 것도 없는 사진에
내가 '베이컨체더치즈' 를 선택하면,
"bcc" 라는 값이(파일명) 전달이 된다.
this.value => 선택한 값을 가지고
changePizzaL() 을 호출을 한다.
document.getElementById("preview_l").style.backgroundImage = "url('pizza_images/"+ name +".jpg')";
=> 'preview_l' 라는 이름을 가진 div 의 style 의 background 의 image를 이 사진으로 바꿔줘
이 div 들은 name과 class 만 지정했지만
css로 미리 지정했기에 이런 이미지를 삽입할 공간이 만들어졌다.
그러면 짠! 이렇게 피자 사진이 나온다
문제 하나 풀어갈 때마다 기분이 진짜,,,, 오진당 짱조아
728x90
반응형
