반응형
<html>
<head>
<title>test</title>
<script language="javascript" type="text/javascript">
function objSelPic()
{
var _id = "sel1";
//파라미터①
var urls = location.search;
var parm1 = urls.split("&")[0];
parm1 = parm1.substr(6,1);
var objSel = document.getElementById(_id);
var names = new Array(5);
names[0] = "null.jpg";
names[1] = "01.gif";
names[2] = "02.jpg";
names[3] = "03.jpg";
names[4] = "04.jpg";
var names2 = new Array(5);
names2[0] = "선택하세요.";
names2[1] = "01.gif";
names2[2] = "02.jpg";
names2[3] = "03.jpg";
names2[4] = "04.jpg";
for(var i = 0; i < names.length; i++)
{
objSel.options.add(new Option(names2[i],i));
}
parm1 = parm1.trim();
var objPic = document.getElementById("pic01");
if(parm1 != "")
{
objSel.options[parm1].selected = true;
//이미지개체 호출(②)
//objPic.src = names[parm1];
}
else
{
objSel.options[0].selected = true;
//objPic.src = names[0];
}
switch(parm1)
{
case "0":
objPic.src = names[0];
break;
case "1":
objPic.src = names[1];
break;
case "2":
objPic.src = names[2];
break;
case "3":
objPic.src = names[3];
break;
case "4":
objPic.src = names[4];
break;
default:
objPic.src = names[0];
}
}
function clickBtn()
{
var _id = "sel1";
var objSel = document.getElementById(_id);
var sel = objSel.selectedIndex;
var hrefs = "/test2.htm?param1=" + sel;
}
</script>
</head>
<body>
<form name="myForm">
<select name="sel1" id="sel1"></select>
<input type="submit" value="선택" onclick="clickBtn();">
<br/>
<img src="01.gif" name="pic01" id="pic01" border="0">
<script language="javascript" type="text/javascript">
objSelPic();
</script>
</form>
</body>
</html>
※-----------------------------------------------------------------------------------------------※
①은 웹에서 넘어오는 파라미터를 확인하는 방법(get방식, post방식은 확인해보지 않았다.)
②배열명 names에 선언된 이미지파일들(서버에 같은폴더및이름의 파일이 존재해야한다.)을
파라미터로 넘어온값과 비교하여 일치하는 파일을 pic01 이미지 개체에 호출한다.