묻고답하기
셀렉트매뉴의 타깃설정
2007.02.18 00:07
제작중인 홈페이지 메인(index.html)에 셀렉트매뉴(아래코드있슴) 를 삽입하여 특정한 sub페이지에다 뿌려주고싶습니다
정리하면)
1) 홈페이지 메인(index.html)페이지 에 삽입된 셀렉트매뉴(아래소스참조)에서 예를들면 cnn을 클릭,
2) 목적지를(메인메뉴- 홈,국제문제, 방송국, 게시판 ....이라고가정할때) 방송국(주메뉴)을 클릭하면 서브메뉴가 5개있는데 그중 1페이지(brodcasting.html) 내부(왜냐면 서브페이지
모두가 헤더와 푸터로 인클루드된방식) 에 iframe을 지정하여(name="air"이라고가정) 이곳에다가 뿌려주고자함.
지금현재 아래의 소스를 클릭하면 저의 홈페이지를 벗어나서 해당 사이트(예를들면, cnn,bbc,등으로가버림)로 가버리기 때문에 저는 이러한 해당 사이트들을 저의 홈페이지 내에있는
broadcasting.html 안에있는 iframe(name="air")이곳에다가 보여지게 하고싶습니다.
이쪽분야는 너무나 생소하고 뭐가뭔지몰라서 도움을 청합니다... 강호의 고수님들 도와주세요.....................................
[셀렉트매뉴소스]
<style type="text/css">
.cate_scroll-list {
position: absolute;
top: 50px;
left: 3px;
border: 1px solid #ccc;
background-color: #fff;
width: 175px;
height: 1px;
overflow: auto;
scrollbar-face-color: #DBDBDB;
scrollbar-track-color: #F4F4F4;
scrollbar-highlight-color: #DBDBDB;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-shadow-color: #DBDBDB;
scrollbar-darkshadow-color: #DBDBDB;
scrollbar-arrow-color: #606060;
}
</style>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<SCRIPT LANGUAGE="JavaScript">
<!--
function startCateScrollScroll() {
setTimeout("slideCateScroll()", 10);
}
function slideCateScroll() {
var Sel_Height=150; //셀렉트 박스의 세로 크기 지정
el = document.getElementById("cate_scroll-list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 1;
el.heightTo = Sel_Height;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 1; //셀렉트 영역이 닫힐때 크기 지정
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startCateScrollScroll();
} else {
if (el.heightTo == Sel_Height) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
//-->
</SCRIPT>
<div id="cate_scroll" style="">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()">방송국을 클릭하세요</span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:10; overflow: auto;">
<a href="http://www.cnn.com/">cnn</a><BR />
<a href="http://www.bbc.com/">bbc</a><BR />
<a href="http://www.kbs.co.kr/">kbs</a><BR />
<a href="http://www.sbs.co.kr/">sbs</a><BR />
</div>
</div>
정리하면)
1) 홈페이지 메인(index.html)페이지 에 삽입된 셀렉트매뉴(아래소스참조)에서 예를들면 cnn을 클릭,
2) 목적지를(메인메뉴- 홈,국제문제, 방송국, 게시판 ....이라고가정할때) 방송국(주메뉴)을 클릭하면 서브메뉴가 5개있는데 그중 1페이지(brodcasting.html) 내부(왜냐면 서브페이지
모두가 헤더와 푸터로 인클루드된방식) 에 iframe을 지정하여(name="air"이라고가정) 이곳에다가 뿌려주고자함.
지금현재 아래의 소스를 클릭하면 저의 홈페이지를 벗어나서 해당 사이트(예를들면, cnn,bbc,등으로가버림)로 가버리기 때문에 저는 이러한 해당 사이트들을 저의 홈페이지 내에있는
broadcasting.html 안에있는 iframe(name="air")이곳에다가 보여지게 하고싶습니다.
이쪽분야는 너무나 생소하고 뭐가뭔지몰라서 도움을 청합니다... 강호의 고수님들 도와주세요.....................................
[셀렉트매뉴소스]
<style type="text/css">
.cate_scroll-list {
position: absolute;
top: 50px;
left: 3px;
border: 1px solid #ccc;
background-color: #fff;
width: 175px;
height: 1px;
overflow: auto;
scrollbar-face-color: #DBDBDB;
scrollbar-track-color: #F4F4F4;
scrollbar-highlight-color: #DBDBDB;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-shadow-color: #DBDBDB;
scrollbar-darkshadow-color: #DBDBDB;
scrollbar-arrow-color: #606060;
}
</style>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<SCRIPT LANGUAGE="JavaScript">
<!--
function startCateScrollScroll() {
setTimeout("slideCateScroll()", 10);
}
function slideCateScroll() {
var Sel_Height=150; //셀렉트 박스의 세로 크기 지정
el = document.getElementById("cate_scroll-list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 1;
el.heightTo = Sel_Height;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 1; //셀렉트 영역이 닫힐때 크기 지정
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startCateScrollScroll();
} else {
if (el.heightTo == Sel_Height) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
//-->
</SCRIPT>
<div id="cate_scroll" style="">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()">방송국을 클릭하세요</span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:10; overflow: auto;">
<a href="http://www.cnn.com/">cnn</a><BR />
<a href="http://www.bbc.com/">bbc</a><BR />
<a href="http://www.kbs.co.kr/">kbs</a><BR />
<a href="http://www.sbs.co.kr/">sbs</a><BR />
</div>
</div>
댓글 3
-
엔시[치키니]
2007.02.19 11:21
-
servant
2007.02.19 13:33
감사합니다,
타겟(물론이전에도시도하였슴)을 지정하여실행하면 작동하지 않습니다.
위의 프로그램을 다른것(콤보)바꿔야될지 모르겠습니다...
다시한번 설명드리자면...
메인페이지에 배너형식으로 제작된 본프로그램 에서 하나의 콤보메뉴(예를들면, sbs)를 클릭하면(지금은 바로 해당홈페이지로 가버림) 저의메인매뉴(a,b,c,d...)아래에 즉(c/c-1.html), c-1.html에 포함된 iframe(name="air")이곳에 해당웹사이트의 전부(콤보메뉴에서선택된)를 보여지게하고싶습니다...
이렇게 할려면 단지 타겟설정(콤보해당메뉴)만으로 해결될수있는지... 혹은 이프로그램이외에 다른프로그램(콤보)을 사용해야할지 모르겠습니다....
결론적으로 타겟설정만으로는 않되는데요? -
김연
2007.03.13 08:30
너무 어렵게 생각하지 마시고 혹시 asp php jsp 에 익숙하지 않으시다면 다음과 같이 자바스크립트의 쿠키만을 가지고 간단하게 이용하실 수도 있습니다.
[sample.html]
<html>
<head>
<style type="text/css">
.cate_scroll-list {
position: absolute;
top: 50px;
left: 3px;
border: 1px solid #ccc;
background-color: #fff;
width: 175px;
height: 1px;
overflow: auto;
scrollbar-face-color: #DBDBDB;
scrollbar-track-color: #F4F4F4;
scrollbar-highlight-color: #DBDBDB;
scrollbar-3dlight-color: #DBDBDB;
scrollbar-shadow-color: #DBDBDB;
scrollbar-darkshadow-color: #DBDBDB;
scrollbar-arrow-color: #606060;
}
</style>
<!--<BODY></BODY> 부분에 아래의 스크립트를 복사해 넣으세요-->
<script>
var tvurl = getCookie("tvurl");
if(!isNaN(tvurl) && tvurl != "" ) {
document.cookie = "tvurl=";
}
function getCookie( name ){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
function goTV(num) {
var Num = num;
document.cookie = "tvurl=" + Num +";";
location.replace('c.html'); // 방송국을 삽입할 페이지
}
</script>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
function startCateScrollScroll() {
setTimeout("slideCateScroll()", 10);
}
function slideCateScroll() {
var Sel_Height=150; //셀렉트 박스의 세로 크기 지정
el = document.getElementById("cate_scroll-list");
if (el.heightPos == null || (el.isDone && el.isOn == false)) {
el.isDone = false;
el.heightPos = 1;
el.heightTo = Sel_Height;
} else if (el.isDone && el.isOn){
el.isDone = false;
el.heightTo = 1; //셀렉트 영역이 닫힐때 크기 지정
}
if (Math.abs(el.heightTo - el.heightPos) > 1) {
el.heightPos += (el.heightTo - el.heightPos) / 10;
el.style.height = el.heightPos + "px";
startCateScrollScroll();
} else {
if (el.heightTo == Sel_Height) {
el.isOn = true;
} else {
el.isOn = false;
}
el.heightPos = el.heightTo;
el.style.height = el.heightPos + "px";
el.isDone = true;
}
}
</SCRIPT>
<div id="cate_scroll" style="">
<span style="width:100%;height:45px;cursor: pointer" onclick="slideCateScroll()">방송국을 클릭하세요</span>
<div id="cate_scroll-list" class="cate_scroll-list" style="line-height:17px; padding-top:5; padding-right:5; padding-bottom:5; padding-left:10; overflow: auto;">
<a onclick="goTV(1)" style='cursor:pointer'>cnn</a><BR />
<a onclick="goTV(2)" style='cursor:pointer'>bbc</a><BR />
<a onclick="goTV(3)" style='cursor:pointer'>kbs</a><BR />
<a onclick="goTV(4)" style='cursor:pointer'>sbs</a><BR />
</div>
</div>
</body>
</html>
[c.html]
<html>
<head>
<script>
var tvurl = getCookie("tvurl");
document.cookie = "tvurl=;";
var tvChannel = new Array();
tvChannel[1] = "http://www.cnn.com";
tvChannel[2] = "http://www.bbc.com";
tvChannel[3] = "http://www.kbs.co.kr";
tvChannel[4] = "http://www.sbs.co.kr";
function getCookie(name){
var nameOfCookie = name + "=";
var x = 0;
while ( x <= document.cookie.length )
{
var y = (x+nameOfCookie.length);
if ( document.cookie.substring( x, y ) == nameOfCookie ) {
if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
endOfCookie = document.cookie.length;
return unescape( document.cookie.substring( y, endOfCookie ) );
}
x = document.cookie.indexOf( " ", x ) + 1;
if ( x == 0 )
break;
}
return "";
}
</script>
</head>
<body>
<script>
if(!isNaN(tvurl) && tvurl != "" ) {
document.write("<iframe src='" + tvChannel[tvurl] + "' name=TV width=600 height=500></iframe>");
} else {
document.write("<iframe src='" + tvChannel[1] + "' name=TV width=600 height=500></iframe>");
}
</script>
</body>
</html>
위처럼 두개 파일 만드셔서 테스트 해보시기 바랍니다.
<a href="http://www.bbc.com/" target="air">bbc</a><BR />
<a href="http://www.kbs.co.kr/" target="air">kbs</a><BR />
<a href="http://www.sbs.co.kr/" target="air">sbs</a><BR />
target을 지정해주시면 되겠네요