佈告板

這種佈告板或許更勝於常見的彈出窗口，設定程序也出乎預料的容易。

安裝：
步驟一  下載這個 guanbi.gif 圖像再上載到與有關網頁相同的文件夾內。
步驟二拷貝以下腳本後貼在有關網頁的 HEAD 之中。


<script language="JavaScript1.2"> //drag drop function for NS 4//// ///////////////////////////////// var dragswitch=0 var nsx var nsy var nstemp function drag_dropns(name){ temp=eval(name) temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) temp.onmousedown=gons temp.onmousemove=dragns temp.onmouseup=stopns } function gons(e){ temp.captureEvents(Event.MOUSEMOVE) nsx=e.x nsy=e.y } function dragns(e){ if (dragswitch==1){ temp.moveBy(e.x-nsx,e.y-nsy) return false } } function stopns(){ temp.releaseEvents(Event.MOUSEMOVE) } //drag drop function for IE 4+//// ///////////////////////////////// var dragapproved=false function drag_dropie(){ if (dragapproved==true){ document.all.showimage.style.pixelLeft=tempx+event.clientX-iex document.all.showimage.style.pixelTop=tempy+event.clientY-iey return false } } function initializedragie(){ iex=event.clientX iey=event.clientY tempx=showimage.style.pixelLeft tempy=showimage.style.pixelTop dragapproved=true document.onmousemove=drag_dropie } if (document.all){ document.onmouseup=new Function("dragapproved=false") } ////drag drop functions end here////// function hidebox(){ if (document.all) showimage.style.visibility="hidden" else if (document.layers) document.showimage.visibility="hide" } </script>

步驟三拷貝以下代碼貼在有關網頁的 </body> 之上( body 的尾部) 。這是包含所有指令的部份代碼。參照下面的詳細說明。


<div id="showimage" style="position:absolute;width:250px;left:175;top:100"> <table border="0" width="250" bgcolor="#990000" cellspacing="0" cellpadding="4"> <tr> <td width="100%"><table border="0" width="100%" cellspacing="0" cellpadding="0" height="36"> <tr> <td onMousedown="initializedragie()" style="cursor:move" width="100%"><ilayer width="100%"><layer width="100%" onMouseover="dragswitch=1;drag_dropns(showimage)" onMouseout="dragswitch=0"> <center> <font face="Verdana" color="#FFFFFF"><strong>Announcement Box</strong></font> </center></layer></ilayer></td> <td style="cursor:hand"><a href="#" onClick="hidebox();return false"><img src="close.gif" width="16" height="14" border=0></a></td> </tr> <tr> <td width="100%" bgcolor="#C0C0C0" style="padding:4px" colspan="2">   </td> </tr> </table>

步驟四逐行指令如下：

<div id="showimage" style="position:absolute;width:250px;left:175;top:100">
250 是佈告板的寬度，它必須與下面的表單寬度相等。 175 為指定佈告板與瀏覽窗口左端的距離。 100 為指定佈告板與瀏覽窗口上端的距離。

<table border="0" width="250" bgcolor="#990000" cellspacing="0" cellpadding="4">
250 是跟隨前面的數字。 #990000 為指定佈告板的頭部與框邊的背景顏色。

<font face="Verdana" color="#FFFFFF"><strong>佈告板</strong></font>
#FFFFFF 是告示板標題字体的顏色。佈告板是標題。

<td width="100%" bgcolor="#C0C0C0" style="padding:4px" colspan="2">
#C0C0C0 是佈告板內容的背景顏色。



在這兩個標記之間佈置佈告板的 html 內容。使用標準的字体(font) 標記以設定文字的級數和顏色。也可以使用鏈接和圖像等標記。

就是如此簡單！
請享用

佈告板
這種佈告板或許更勝於常見的彈出窗口，設定程序也出乎預料的容易。