滑鼠的 MouseOver & MouseOut 特效

各種程式選用

第一篇
滑鼠的 MouseOver & MouseOut 特效！

注意：部份特效 Mozilla Firefox 恐無法顯示

壹、MouseOver & MouseOut 事件運用： Browser：IE Only
運用JavaScript + CSS，讓他直接可以於網頁上，產生類似提示功能的特效，如上例。
MouseOver 當滑鼠移到上面時、MouseOut 當滑鼠移開時所觸動的事件。
請用檢視

原始碼查看，重要處會以 // 加以中文註解說明。
很可惜的是Netscape Communicator Browser並不支援本語法。
滑鼠的 MouseOver & MouseOut 事件，在很多地方都可以看(用)到，以下介紹幾個最實用的例子給大家參考。

貳、狀態列訊息提示：(請將滑鼠移到範例上面，並看狀態列變化) Browser：All
範例
語法：<A href="#onmouseout="window.status='謝謝您'; return true;"onmouseover="window.status='範例'; return true;">範例</A>

參、超鏈結圖示切換：(請將滑鼠移到範例圖示上面，請看範例圖示變化) Browser：All

語法：
<A href=javascript:alert("這是測試用"); onMouseOver=document.images["img1"].src="exp2-1.gif" onMouseOut=document.images["img1"].src="exp2.gif">
<img name="img1" src="exp2.gif" width="44" align="absmiddle" height="22" border=0 alt="範例"></A>

肆、警告 (alert) 提示：(當滑鼠移到 Linking 上面時，便會自動跳出警告訊息) Browser：All
如何儲存本頁資料
語法：
<A href="" onMouseOver= "alert('IE瀏覽器\n\n檔案\n另存新檔\n存檔類型\n完整(*.htm.*.html)')>如何儲存本頁資料</A>

伍、自動取銷內文：(滑鼠移到文字方塊時，便自動取消方塊內資料，方便填寫) Browser：All

語法：<input type="text" name="size" size="10" value="請填入資料" onFocus="this.value=''" onmouseover=this.focus()>

陸、控制跑馬燈運作：(當滑鼠移到文字時，便會自動停止，移開後又開始捲動了) Browser：IE Only
網頁研習室，是您最佳的學習網站
敬請繼續愛護！
語法：
<marquee behavior="scroll" direction="up" width="250" height="50" scrollamount="1" scrolldelay="0" border="0" onmouseover="this.stop()" onmouseout="this.start()">網頁研習室，是您最佳的學習網站<br>敬請繼續愛護！</marquee>

柒、改變文字內容：(當滑鼠移到文字時，便會自動改變文字內容) Browser：IE Only

將您的滑鼠移至這裡
語法：
<SCRIPT language=javascript>
function mouseover(){
var change=document.all.tags("Font");
for(x=0;x if (change[x].innerText=="將您的滑鼠移至這裡")
change[x].outerText="注意！我改變了";
}
</SCRIPT>
<span onmouseover=mouseover()><font color=red>將您的滑鼠移至這裡</font></span>

捌、改變表格底色：(當滑鼠移到表格時，便會自動改變表格底色，狀態列也有變化哦！) Browser：IE Only

表格底色變了

語法：
<table border=1 width="150">
<tr><td align=center bgcolor=#e6cfcf onMouseOver="this.style.backgroundColor='#00ff00';window.status=('謝謝測試');return true;" onMouseOut="this.style.backgroundColor='#ffff00'; window.status=('');return true;">
表格底色變了
</td></tr>
</table>

玖、文字顏色變化：(當滑鼠移到設定文字時，便會自動改變文字顏色) Browser：IE Only

本報導由網頁研習室製作

語法：
<div style="background:buttonface; width:180px; height:10px; text-align:center; text-valign:middle">
<nobr>
本報導由<font onmouseout="this.style.color = '000000';" onmouseover="this.style.color = 'ff0000';" style="color:#0000ff">網頁研習室</font>製作
</nobr>
</div>

拾、自動開啟網頁：(當滑鼠移到 Linking 時，便會自動開啟網頁) Browser：All
我要加入教學會員
語法：
<script language="JavaScript">

</script>
我要<A href="#" onMouseOver="MM_openBrWindow('http://www.webpage.idv.tw/donate.htm','message','scrollbars=yes')">加入</A>教學會員

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此引用來源，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您學會 HTML 語法，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質，索取教材資料屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎繼續訂閱。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。