打造屬于自己的可視Web HTML編輯器
發(fā)布時(shí)間:2008-08-06 閱讀數(shù): 次 來(lái)源:網(wǎng)樂(lè)原科技
在Intranet中實(shí)現(xiàn)這樣的方法非常多,有的采用捕獲Mouse方法,有的采用多圖片方法等等。在此,筆者則采用動(dòng)態(tài)Css方法來(lái)實(shí)現(xiàn),這樣不僅簡(jiǎn)單,而且非常容易編寫(xiě)程序。
我們首先定義一組能產(chǎn)生Up,Dwon和正常效果的樣式,如下:(以下的效果是在背景色為d0d0c8上產(chǎn)生的,若您的背景色不是,請(qǐng)修改rgb值即可)
<style>
.Up
{border-left: 1Px solid rgb(233,244,249);
border-right: 1px solid rgb(12,12,12);
border-bottom: 1px solid rgb(12,12,12);
border-top: 1px solid rgb(233,244,249);
cursor:hand;
}
.Down
{border-right: 1Px solid rgb(233,244,249);
border-left: 1px solid rgb(12,12,12);
border-top: 1px solid rgb(12,12,12);
border-bottom: 1px solid rgb(233,244,249);
cursor:hand;
}
.None
{border-top: 1Px solid rgb(208,208,200);
border-left: 1px solid rgb(208,208,200);
border-bottom: 1px solid rgb(208,208,200);
border-right: 1px solid rgb(208,208,200);
cursor:hand;}
</style>
再編寫(xiě)一個(gè)小函數(shù),如下:(t表示某個(gè)td對(duì)象,n表示顯示的效果,1=Up ,2=Down;其它表示正常)
function Check(t,n)
{
if(n==1) t.className ="Up"
else if(n==2) t.className ="Down" else t.className ="None"
}
那么在HTML中加入如下代碼:<td class=None onmousedown=Check(this,2) onmouseover="Check(this,1)" onmouseout="Check(this,0)" onmouseup="Check(this,1)"></td> 即可大功告成。