模板
教程
環境
性能
功能
管理
onMouseover的靈活運用
很多有過頁面制作經驗的人，為了豐富頁面的動感，在設計數量眾多的按鈕時，通常都喜歡采用onMouseover這個函數。其效果就是當鼠標劃過按鈕時，按鈕看起來會有一種起伏變化，從而成為一種獨特的信息提示。
關于onMouseover可以有四種基本的表現形式：一圖對一圖、一圖對多圖、多圖對一圖、多圖對多圖。下面就讓我們一一道來：
一圖控制一圖
開題中我們提到的這種效果就是一圖對一圖，它僅僅控制圖自身的變化。
當鼠標劃過圖a的時候便換成圖c，當鼠標劃過圖b的時候便換成圖d。因為圖a與圖c的不同，看起來就會有視覺上的動感。而這在現在的頁面設計中也是最常用的一種動態效果。
代碼如程序1所示范：
<HEAD>
<script language="JavaScript">
var imgover= new Array(2);
var imgout=new Array(2);
for(i=1;i<=2;i++)
{
imgover[i]="firstb"+i+".gif";
imgout[i]="firsta"+i+".gif";
}
function over(i)
{
if(document.images)
document.images["image"+i].src=imgover[i];
}
function out(i)
{
if(document.images)
document.images["image"+i].src=imgout[i];
}
</script>
</HEAD>
<BODY>
<a href="#a" onMouseover="over(1)" onMouseout="out(1)">
<img name="image1" src="firsta1.gif" border="0"></a>
<a href="#a" onMouseover="over(2)" onMouseout="out(2)">
<img name="image2" src="firstb1.gif" border="0"></a>
</BODY>
</HTML>
?。ǔ绦?）
參看：http://www.gameclub.com.cn（游戲信息網）
我們還可以通過一圖控制另一圖的變化，讓它變得更花哨一點。比如當鼠標劃過圖a的時候，讓圖c發生一些變化，這樣一看起來會有一種視覺上的跳躍感。
參看：http://www.gliding.org.cn（華聯滑翔傘俱樂部）
一圖控制多圖
當你的鼠標指針從“數字”按鈕上劃過時，圖2上顯示的是三張數字的圖象，當你的鼠標指針從“字母”上劃過時，圖2顯示的是圖3中三張字母的圖片。
代碼如程序2所示范：
<HTML>
<HEAD>
<script language="JavaScript">
var overnum= new Array(3);
var overletter=new Array(3);
for(i=1;i<=3;i++)
{
overnum[i]="cyan0"+i+".jpg";
overletter[i]="cyan"+i+".gif";
}
function overn()
{
if(document.images)
{
document.images["image1"].src=overnum[1];
document.images["image2"].src=overnum[2];
document.images["image3"].src=overnum[3];
}
}
function overl()
{
if(document.images)
{
document.images["image1"].src=overletter[1];
document.images["image2"].src=overletter[2];
document.images["image3"].src=overletter[3];
}
}
</script>
</HEAD>
<BODY>
<img name="image1" src="cyan01.jpg" border="0"></a>
<img name="image2" src="cyan02.jpg" border="0"></a>
<img name="image3" src="cyan03.jpg" border="0"></a></br>
<a href="#a" onMouseover="overn()">數字</a>
<a href="#a" onMouseover="overl()">字母</a>
</BODY>
</HTML>
?。ǔ绦?）
想想看如果把這種效果用到自己的頁面上，是不是也會有“牽一發而動全局”的快感呢？整個頁面再也不是單一的羅列，簡潔明快的風格一定會讓你賞心悅目。具體的效果可以看http://www.263.net.cn/capital/?MIval=C07_09 里的釣魚欄目。
多圖控制一圖
如果頁面中有四個欄目，而每一個欄目都有一大段的介紹，你是否會無奈的采取以下方法：將所有的文字緊密地壓縮排列在一個頁面上？現在不必了。告訴你個簡便的方法就是用onMouseover來實現。
如圖4所示，頁面有四個獨立欄目，鼠標停留在哪個欄目上，圖4的方框中就會顯示這個欄目的內容介紹。到http://www.263.net.cn/capital/C05_18（中華傳統養生）看看，你的體會將更深刻。至于源程序讀者可以自行領會。
多圖控制多圖
多圖控制多圖是第二種情況與第三種情況的中和，也是最靈活的一種應用。如果你在合成頁面的時候用的是DREAMWEAVER軟件。你會發現在DREAMWEAVER里你盡可以隨心所欲的去設計。下面就跟著我在DREAMWEAVER2中實現你的想法吧。
1、選中控制對象；
2、打開Behaviours工具框；
3、點擊'+'增加功能，選"swap image"，彈出"swap image"對話框；
4、功能框中有兩個選項"images"和"set source to"。在"images"中選擇被控制的圖，在"set source to"中設置控制圖的變化對象。
雖然用draemweaver工具來實現onMouseover效果非常方便，但是頁面的字節數一定會大于你手工編寫的頁面字節數。如何取舍就看你自己決定了。
如果你的控制圖與被控制圖在不同的兩個FRAME中，你又如何來實現呢？其實很簡單：
function tabOn(i)
{
if(document.images)
{
document.images["sr"+i].src=ftover[i]; （同Frame內）
parent.main.document.images["mainsrc"].src=ftovernext[i];
（不同Frame內） }
}
這其中的竅門就是將另一個Frame的名字定義在控制圖的前面。
具體效果請看：http://www.isdn.com.cn
