博客

自動輪播的訊息頁籤
IE 與 Mozilla 環境下皆可以執行

這是現今許多網站上都有的功能，這種表現方式似乎蠻流行的。
但大多數網站的語法都太過冗長且一般使用者套用不易，遂自行
依其功能寫了此程式，希望此一程式能解決大家的問題。

新增功能：按一下標籤可暫停輪播再按一下可繼續。

注意事項：

• 請自行調整輪播時間(以毫秒表示)
  Msg_Timer=setTimeout("Rot_Msg()",3000)
• 標籤數量與訊息數量可自由增減，但兩者數量需吻合。
• 標籤圖片請依照範例所附的圖片方式命名。
• 請自行調整圖片寬度與訊息框的 css 文字與高度設定。
• 請勿更改標籤與訊息框的 id 與 name 名稱設定。
• 訊息長度請自行斟酌，以免輪播時影響網頁排版。

可修改項目

1.CSS

.ImgTab {cursor:hand}　←這行可有可無，不影響程式執行
.MsgHide {height:174px;border:1px solid #aaa;padding:10px;font:normal 12px 細明體;display:none}

2.HTML ( 以下為完整頁籤架構 )

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img10.gif" onmouseover="Rot_Msg(1)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img20.gif" onmouseover="Rot_Msg(2)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
<td><img name="Tag_COMM" class="ImgTab" src="Tab_Img30.gif" onmouseover="Rot_Msg(3)" onmouseout="Rot_Msg()" onclick="Pause_Msg()"></td>
</tr>
<tr><td colspan="3">
<div id="Tag_IE_1" name="Tag_NN_1" class="MsgHide">
訊息內容...
</div>
<div id="Tag_IE_1" name="Tag_NN_1" class="MsgHide">
訊息內容...
</div>
<div id="Tag_IE_1" name="Tag_NN_1" class="MsgHide">
訊息內容...
</div>
</td></tr>
</table>

3.JavaScript ( 更改輪播速度，範例為3000毫秒 )

Msg_Timer=setTimeout("Rot_Msg()",3000);