JavaScript - iframe을 이용한 서브페이지 이동 컨트롤
Posted 12 22, 2008 15:08, Filed under: Language/JavaScript부모 페이지
<html>
<head>
<title>test_main</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<SCRIPT language="JavaScript">
function goPage(value){
if(value == '') {
return;
}
var url = '값을넘겨줄페이지.jsp#' + value;
campaign.location.href=url;
// 값을 넘겨준후 해당하는 페이지에 기본이미지를 지정
test_iframe.document.title01.src='/com_title1.gif';
test_iframe.document.title02.src='/com_title2.gif';
test_iframe.document.title03.src='/com_title3.gif';
test_iframe.document.title04.src='/com_title4.gif';
// value 의 값에 따라 강조된 이미지로 변경
if(value == 'com_title1') {
test_iframe.document.title01.src='/com_title11.gif';
} else if(value == 'com_title2') {
test_iframe.document.title02.src='/com_title22.gif';
} else if(value == 'com_title3') {
test_iframe.document.title03.src='/com_title33.gif';
} else if(value == 'com_title4') {
test_iframe.document.title04.src='/com_title44.gif';
}
}
</SCRIPT>
</head>
<!--
팝업으로 이 페이지를 띄울경우, 클릭된 메뉴의 값으로 이동을 하고자 할겨우 onload="" 속성을 설정한다.
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="goPage('<%=target%>')">
-->
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" border="0" cellpadding="0" cellspacing="0">
<tr height="376">
<td width="685" height="376"><img
src="/com_img1.gif"
width="685" height="376" alt="" usemap="#test_main_011b5c65f"
border="0"></td>
<td width="60" height="376"></td>
</tr>
<tr>
<td width="685"
background="/com_img3.gif">
// iframe 위치
<iframe name="test_iframe" src="값을넘겨줄페이지.jsp" border="0" frameborder="0" marginhight="0" scrolling="yes" width="100%" height="400"></iframe></td>
<td valign="top" width="60">
<table width="60" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img
src="/com_qu1.gif"
alt="" width="61" height="31" border="0"></td>
</tr>
<tr>
<td
background="/com_qu3.gif"><a href="javascript:goPage('com_title1')"><img
src="/com_qu4.gif"
alt="" width="50" height="23" border="0"></a></td>
</tr>
<tr>
<td
background="/com_qu3.gif"><a
href="javascript:goPage('com_title1')"><img
src="/com_qu5.gif"
alt="" width="50" height="42" border="0"></a></td>
</tr>
<tr>
<td
background="/com_qu3.gif"><a
href="javascript:goPage('com_title2')"><img
src="/com_qu6.gif"
alt="" width="50" height="39" border="0"></a></td>
</tr>
<tr>
<td
background="/com_qu3.gif"><a
href="javascript:goPage('com_title3')"><img
src="/com_qu7.gif"
alt="" width="50" height="39" border="0"></a></td>
</tr>
<tr>
<td
background="/com_qu3.gif"><a
href="javascript:goPage('com_title4')"><img
src="/com_qu8.gif"
alt="" width="50" height="42" border="0"></a></td>
</tr>
<tr>
<td><img
src="/com_qu2.gif"
alt="" width="61" height="30" border="0"></td>
</tr>
</table>
</td>
</tr>
<tr height="53">
<td width="685" height="53"><img
src="/com_img2.gif"
alt="" width="685" height="53" border="0"></td>
<td width="60" height="53"></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body topmargin="0" leftmargin="0">
<table width="64" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30"></td>
<!--
<a name="com_title1">이미지</a> 에 호출(이동)할 이름을 지정하여준다.
-->
<td> <a name="com_title1"> <img src="/com_title11.gif" alt="" width="629" height="35" border="0" name="title01"></a></td>
</tr>
<tr>
<td width="30"></td>
<td><img src="/com_in1.gif" alt="" width="629" height="155" border="0"></td>
</tr>
<tr>
<td width="30"></td>
<td> <a name="com_title2"> <img src="/com_title2.gif" alt="" width="629" height="35" border="0" name="title02"></a></td>
</tr>
<tr>
<td width="30"></td>
<td><img src="/com_in2.gif" alt="" width="629" height="239" border="0"></td>
</tr>
<tr>
<td width="30"></td>
<td><img src="/com_bu.gif" alt="" width="170" height="54" border="0"></td>
</tr>
<tr>
<td width="30"></td>
<td> <a name="com_title3"> <img src="/com_title3.gif" alt="" width="629" height="35" border="0" name="title03"></a></td>
</tr>
<tr>
<td width="30"></td>
<td><img src="/com_in3.gif" alt="" width="629" height="171" border="0"></td>
</tr>
<tr>
<td width="30"></td>
<td> <a name="com_title4"> <img src="/com_title4.gif" alt="" width="629" height="35" border="0" name="title04"></a></td>
</tr>
<tr>
<td width="30"></td>
<td>
<img src="/com_in4.gif" alt="" width="629" height="83" border="0">
</td>
</tr>
<tr>
<td width="30"></td>
<td height="300">
</td>
</tr>
</table>
</body>
</html>
"Language / JavaScript" 분류의 다른 글
| Javascript - 중복 체크 알고리즘 (0) | 2011/01/10 |
| Html - DIV 태그를 컨트롤 배경색 변경하기. (0) | 2009/01/06 |
| JavaScript - 팝업창 띄울시에 해상도별 창 위치 설정 & 이동페이지 focus()설정 (0) | 2008/12/22 |
| JavaScript - 웹 페이지 전체 화면으로 띄우기 (0) | 2008/12/19 |
| 테이블 크기에 맞춰 문자열 자르기 (0) | 2008/11/19 |
| Select 옵션 몇초 후에 자동 페이지 바뀜 (0) | 2008/11/19 |
Trackback URL : http://develop.sunshiny.co.kr/trackback/57