묻고답하기
고수님들께 도움을 청합니다.부디 도와주시길
2009.01.02 17:23
실력이 일천해서 그냥 있는대로 쓰다가. 딱 두가지가 필요해서 숱한날을 소위 삽질하다가
두손*두발 다 들고 여기 계신 고수님들에게 도움을 청하게 됐습니다.
1-댓글쓰는 부분을 새창에서 할 수 있는 방법
2.첨부파일이 이미지들인데 보여주는 부분에 스위칭 탭으로 처리할수 있는 방법.
에 대해 가르침을 청합니다.
밑의 소스는 phpschool에서 얻은 스위칭 탭 소스구요.
--제가 html가 이거구나 할 정도의, 걸음마 실력이니, 소스를 만들어 주심 더욱 감사드리겟습니다.
부디 외면하지 마시고 도와주시길 재삼 부탁드립니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Switching Tab </title>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<script language="JavaScript">
<!--
var model = new Array();
function init(){
var layer1 = document.getElementById('layer1');
var layer2 = document.getElementById('layer2');
var layer3 = document.getElementById('layer3');
model.push(layer1);
model.push(layer2);
model.push(layer3);
for(var i=0,max=model.length; i<max; i++){
set_event_listener(model[i],'mouseover','switching_tab');
}
switch_execute(layer1);
}
function set_event_listener(obj,evt_type,callback){
if(window.event){
obj.attachEvent('on' + evt_type,eval(callback));
}else{
obj.addEventListener(evt_type,eval(callback),false);
}
}
function switching_tab(e){
var target;
if(window.event){
target = window.event.srcElement;
}else{
target = e.target;
}
switch_execute(target.parentNode);
}
function switch_execute(layer){
var visible_tab_top = -1;
var hidden_tab_top = 0;
if(window.navigator.appName.indexOf('Explorer') > -1){
visible_tab_top++;
hidden_tab_top++;
}
for(var i=0,max=model.length; i<max; i++){
var tab = get_tab_element(model[i]);
var content = get_content_element(model[i]);
if(model[i] == layer){
model[i].style.zIndex = 99;
tab.style.top = visible_tab_top;
tab.style.backgroundColor = '#FFFFFF';
content.style.backgroundColor = '#FFFFFF';
}else{
model[i].style.zIndex = 0;
tab.style.top = hidden_tab_top;
tab.style.backgroundColor = '#EEEEEE';
content.style.backgroundColor = '#EEEEEE';
}
}
}
function get_tab_element(model){
var child = model.childNodes;
for(var i=0,max=child.length; i<max; i++){
if(child[i].nodeType == 1 && child[i].className == 'tab'){
return child[i];
}
}
}
function get_content_element(model){
var child = model.childNodes;
for(var i=0,max=child.length; i<max; i++){
if(child[i].nodeType == 1 && child[i].className == 'content'){
return child[i];
}
}
}
//-->
</script>
<style>
.tab{
width: 50px;
height: 20px;
border-top: solid 1px #D9D9D9;
border-right: solid 1px #D9D9D9;
border-left: solid 1px #D9D9D9;
background-color: #EEEEEE;
position: absolute;
z-index: 2;
}
#tab1{
margin-left: 10px;
}
#tab2{
margin-left: 60px;
}
#tab3{
margin-left: 110px;
}
.content{
width: 200px;
height: 50px;
border: solid 1px #D9D9D9;
background-color: #EEEEEE;
position: absolute;
top: 19px;
z-index: 1;
}
#layer1{
top: 50px;
left: 50px;
position: absolute;
}
#layer2{
top: 50px;
left: 50px;
position: absolute;
}
#layer3{
top: 50px;
left: 50px;
position: absolute;
}
</style>
</head>
<body onload="init()">
<div id="layer1">
<div id="tab1" class="tab">tab1</div>
<div class="content">content 1</div>
</div>
<div id="layer2">
<div id="tab2" class="tab">tab2</div>
<div class="content">content 2</div>
</div>
<div id="layer3">
<div id="tab3" class="tab">tab3</div>
<div class="content">content 3</div>
</div>
</body>
</html>