星期三, 1月 16, 2008

滑鼠動態切換標籤

配合CSS與JAVASCRIPT,使滑鼠移到指定標籤時,下方的內容動態更新

<script>
<!--
/*標籤更換顯示樣式*/
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

...........................................................................

預先載入標籤的圖檔(可直接應用DW的變換影像的行為指令來達成)

<body onLoad="MM_preloadImages('img/box_08_tit01_off.gif','img/box_08_tit02_off.gif','img/box_08_tit03_off.gif','img/box_08_tit04.gif','img/box_08_tit03.gif','img/box_08_tit04_off.gif','img/box_08_tit02.gif','img/box_08_tit01.gif')">

...........................................................................

HTML 語法結構

<div id="box_08">
<p class="tit">&nbsp;</p>
<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
<li class="hover" onMouseOver="setTab(1,0)"><a href="#"><img src="img/box_08_tit01.gif" alt="電腦" name="tab01" id="tab01" onMouseOver="MM_swapImage('tab01','','img/box_08_tit01.gif','tab02','','img/box_08_tit02_off.gif','tab03','','img/box_08_tit03_off.gif','tab04','','img/box_08_tit04_off.gif',1)"></a></li>
<li onMouseOver="setTab(1,1)"><a href="#"><img src="img/box_08_tit02_off.gif" alt="房屋" name="tab02" id="tab02" onMouseOver="MM_swapImage('tab01','','img/box_08_tit01_off.gif','tab02','','img/box_08_tit02.gif','tab03','','img/box_08_tit03_off.gif','tab04','','img/box_08_tit04_off.gif',1)"></a></li>
<li onMouseOver="setTab(1,2)"><a href="#"><img src="img/box_08_tit03_off.gif" alt="旅遊" name="tab03" id="tab03" onMouseOver="MM_swapImage('tab01','','img/box_08_tit01_off.gif','tab02','','img/box_08_tit02_off.gif','tab03','','img/box_08_tit03.gif','tab04','','img/box_08_tit04_off.gif',1)"></a></li>
<li onMouseOver="setTab(1,3)"><a href="#"><img src="img/box_08_tit04_off.gif" alt="語文" name="tab04" id="tab04" onMouseOver="MM_swapImage('tab01','','img/box_08_tit01_off.gif','tab02','','img/box_08_tit02_off.gif','tab03','','img/box_08_tit03_off.gif','tab04','','img/box_08_tit04.gif',1)"></a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
<ul class="block">
<li>
<h3><img src="img/ad_7070.gif" alt="AD">職場電腦技能免費查1</h3>
<p><a href="#">多媒體網頁設計免費課程放送我是假字我是假字二十六個字</a></p>
</li>
</ul>
<ul>
<li><h3><img src="img/ad_24070.gif" alt="AD"></h3></li>
</ul>
<ul>
<li>
<h3><img src="img/ad_7070.gif" alt="AD">職場電腦技能免費查3</h3>
<p><a href="#">多媒體網頁設計免費課程放送我是假字我是假字二十六個字</a></p>
</li>
</ul>
<ul>
<li><h3><img src="img/ad_24070.gif" alt="AD"></h3></li>
</ul>
</div>
</div>
</div>
</div>

...........................................................................

CSS的設定語法


#box_08{width: 260px;float:right;margin:0px; margin-bottom:10px;}
#box_08 p.tit{background: url(box08_tit_bg.gif) no-repeat top;height:29px;}
#tabs1{text-align:left;width:258px;height:158px;background-color:#f8f8f5;border:1px #d2d2d2 solid;border-top:0px;}
.menu1box{position:relative;overflow:hidden;height:74px;width:258px;text-align:left;}
#menu1{position:absolute;top:0;left:0;z-index:1;margin:0;}
#menu1 li{float:left;display:block;cursor:pointer;line-height:73px;height:73px;}
/**------------------------------------修正IE6------------------------------------------------**/
* html #menu1 li{line-height:74px;height:74px;}
/**------------------------------------------------------------------------------------------**/
#menu1 li.hover{display: block;}
.main1box{clear:both;margin-top:-1px;width:258px;}
#main1 ul{display: none; margin:0;dadding:0}
#main1 ul.block{display: block; margin:0;}
#main1 ul h3{padding:10px 0px 2px 9px;letter-spacing:1px;}
#main1 ul p{padding:0 10px;letter-spacing:1px;}
#main1 ul img {float:left; margin:0 9px 0 0;}

/***-----------------------------------標籤切換樣式結束----------------------------------***

範例參考:\lab02project104jobbankindex.htm

張貼留言