우측 탭메뉴 관련 문의
관련링크
본문
초보라 어떻게 해야될지 잘이해가 되지않습니다.
통째로 복사해서 넣고, 소스수정해서 사용하라고 하시는데
어디에 붙혀넣고, 소스를 수정해야할지 잘모르겠습니다..
도와주시면 감사합니다.
그누보드5 베타버전 사용중입니다.
(아래의 소스는 위 링크에 올려진 우측 탭 소스입니다.)
<style>
ul, li {list-style:none; margin:0; padding:0; font-size:10pt; }
.image_list {clear:both;overflow: hidden;position: relative;height: 150px;width: 600px; border:1px solid #e1e1e1; cursor:pointer;}
.image_list .images {position:absolute; display:none; }
.tab {width:600px;cursor:pointer;}
.tab li {width:70px;float:left;border-right:1px solid #e1e1e1;border-top:1px solid #e1e1e1;padding:7px;}
.tab li.fir {border-left:1px solid #e1e1e1;}
.tab_icon {width:600px;cursor:pointer;}
.tab_icon li {float:left;}
.tab li.tabOutClass {font-weight:normal;color:#707070;background-color:#D0D0D0}
.tab li.tabOverClass {font-weight:bold;color:#000;background-color:#fff;}
</style>
<ul class="tab" id="tab">
<li class="tabOverClass fir" overcss="tabOverClass" outcss="tabOutClass fir">구글</li>
<li class="tabOutClass" overcss="tabOverClass" outcss="tabOutClass">다음</li>
<li class="tabOutClass" overcss="tabOverClass" outcss="tabOutClass">네이버</li>
<li class="tabOutClass" overcss="tabOverClass" outcss="tabOutClass">네이트</li>
<li class="tabOutClass" overcss="tabOverClass" outcss="tabOutClass">야후</li>
</ul>
<div class="image_list" id="image_list">
<div class="images content_frame" style="display:block"><!-- content_frame 클래스를 반드시 포함해야 합니다.-->
<div id="media" class="news">
이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...
이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...이미지가 아닌 html 코딩내용...
</div>
</div>
<div class="images content_frame"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/daum.jpg" /></div>
<div class="images content_frame"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/naver.jpg" /></div>
<div class="images content_frame"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/nate.jpg" /></div>
<div class="images content_frame"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/yahoo.jpg" /></div>
</div>
<br /><br />
<ul class="tab_icon" id="tab2">
<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1_on.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/1.jpg" /></li>
<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/2.jpg" /></li>
<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/3.jpg" /></li>
<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/4.jpg" /></li>
<li><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5.jpg" oversrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5_on.jpg" outsrc="http://cfs.tistory.com/custom/blog/68/684698/skin/images/5.jpg" /></li>
</ul>
<div class="image_list" id="image_list_2">
<div class="images" style="display:block"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/google.jpg" /></div>
<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/daum.jpg" /></div>
<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/naver.jpg" /></div>
<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/nate.jpg" /></div>
<div class="images"><img src="http://cfs.tistory.com/custom/blog/68/684698/skin/images/yahoo.jpg" /></div>
</div>
<script type="text/javascript">
<!--
new tabView({menu:"tab", menuTag:"LI", callEvent:"click", imageArea:"image_list", imageTag:"DIV"});
new tabView({menu:"tab2", menuTag:"IMG", callEvent:"mouseover", imageArea:"image_list_2", imageTag:"DIV"});
function tabView(json){
if(json.callEvent == "mouseover"){
e(json.menu).onmouseover = function(event){
var tabs = tn(e(json.menu), json.menuTag);
var evt = event || window.event;
var t = evt.target || evt.srcElement;
for(n in tabs){
if(tabs[n] == t){
viewContent(n);
rollOver(t);
break;
}
}
}
}else if(json.callEvent == "click"){
e(json.menu).onclick = function(event){
var tabs = tn(e(json.menu), json.menuTag);
var evt = event || window.event;
var t = evt.target || evt.srcElement;
for(n in tabs){
if(tabs[n] == t){
viewContent(n);
//rollOver(event.srcElement);
rollOver(t);
break;
}
}
}
};
//내용 보이기
function viewContent(nIdx){
var els = tn(e(json.imageArea), json.imageTag);
if(els.length == 0) return;
var arr = new Array();
for(n=0; n<els.length; n++){
if(els[n].getAttribute('class').indexOf('content_frame') > 0 ){
arr.push(els[n]);
}
}
for(n=0; n<arr.length; n++){
if(typeof arr[n]=="object"){
if(n==nIdx){
arr[n].style.display = "block";
}else{
arr[n].style.display = "none";
}
}
}
}
//라벨 onmouseover 시 클래스 적용
function rollOver(obj){
//if(c.label == null) return;
//var els = c.label.getElementsByTagName(c.labelType);
var els = tn(e(json.menu), json.menuTag);
if(els.length==0) return;
if(json.menuTag == "IMG"){
for(n in els){
if(typeof els[n] == "object"){
if(els[n] == obj){
els[n].src = els[n].getAttribute("oversrc");
}else{
els[n].src = els[n].getAttribute("outsrc");
}
}
}
}else{
for(n in els){
if(typeof els[n] == "object"){
if(els[n] == obj){
var ocss = els[n].className;
els[n].className = ocss+" "+els[n].getAttribute("overcss");
}else{
els[n].className = els[n].getAttribute("outcss");
}
}
}
}
}// e function rollOver(obj){
}
//객체 반환
function e(id){
return document.getElementById(id);
}
//pa에 속한 태그들 반환
function tn(pa, tagName){
return pa.getElementsByTagName(tagName);
}
//-->
</script>
