實(shí)例說(shuō)明
  導(dǎo)航條是網(wǎng)站設(shè)計(jì)中不可缺少的元素之一,，它能正確地引導(dǎo)瀏覽者查找需要的資料，成為瀏覽者的網(wǎng)站路標(biāo)。同時(shí)網(wǎng)頁(yè)導(dǎo)航條的設(shè)計(jì)風(fēng)格也能影響到頁(yè)面的整體風(fēng)格,，對(duì)于一個(gè)靜態(tài)元素居多的頁(yè)面,，可以為導(dǎo)航添加動(dòng)態(tài)效果,，這樣可以使整個(gè)網(wǎng)站不至于太呆板,，增強(qiáng)網(wǎng)頁(yè)的欣賞價(jià)值。例如,，在明日實(shí)業(yè)網(wǎng)站中,，筆者將導(dǎo)航條設(shè)計(jì)成動(dòng)畫(huà)效果，用戶將鼠標(biāo)移動(dòng)到任意一個(gè)導(dǎo)航按鈕上時(shí),，該按鈕都會(huì)突出顯示,，鼠標(biāo)移出后,，又恢復(fù)為原來(lái)的位置。
關(guān)鍵技術(shù)
  本實(shí)例主要是通過(guò)Image對(duì)象的鼠標(biāo)事件控制Image對(duì)象的src屬性的值實(shí)現(xiàn)的,。
  在JavaScript里提供了對(duì)圖像進(jìn)行處理的專用對(duì)象Image對(duì)象,，創(chuàng)造和預(yù)裝入的圖形之前并非Web頁(yè)面的組成部分，Image對(duì)象存在于瀏覽器的緩沖區(qū)中,，用于替換已經(jīng)顯示的圖像,。
  用Image()構(gòu)造器創(chuàng)建圖形的語(yǔ)法格式如下：
  ObjImg=new image()                   //創(chuàng)建了一個(gè)新的Image對(duì)象，并將其賦予變量ObjImg
  ObjImg.src="圖片文件相對(duì)路徑"     //設(shè)置Image對(duì)象的Src屬性
設(shè)計(jì)過(guò)程
  （1）準(zhǔn)備14張圖片,。7張鼠標(biāo)移出時(shí)顯示的圖片,，圖片的名稱為“menu_0+1~7的數(shù)字+.gif”，7張鼠標(biāo)移入時(shí)顯示的圖片,，圖片的名稱為“menu_0+1~7的數(shù)字+_over.gif”,。
  （2）將準(zhǔn)備的7張鼠標(biāo)移出時(shí)顯示的圖片按順序插入到頁(yè)面中的適當(dāng)位置，并設(shè)置其鼠標(biāo)事件onMouseMove和onMouseout執(zhí)行的操作,，這里分別調(diào)用兩個(gè)不同的自定義JavaScript函數(shù),，關(guān)鍵代碼如下：
  <img src="Images/top/menu_01.gif"id="image1"width="95"height="119"border="0"onMouseMove="move(this,'1')"onMouseout="out(this,'1')">
  <img src="Images/top/menu_02.gif"id="image2"width="95"height="119"border="0"onMouseMove="move(this,'2')"onMouseout="out(this,'2')">
  <img src="Images/top/menu_03.gif"id="image3"width="95"height="119"border="0"onMouseMove="move(this,'3')"onMouseout="out(this,'3')">
  <img src="Images/top/menu_01.gif"id="image4"width="95"height="119"border="0"onMouseMove="move(this,'4')"onMouseout="out(this,'4')">
  <img src="Images/top/menu_01.gif"id="image5"width="95"height="119"border="0"onMouseMove="move(this,'5')"onMouseout="out(this,'5')">
  <img src="Images/top/menu_01.gif"id="image6"width="95"height="119"border="0"onMouseMove="move(this,'6')"onMouseout="out(this,'6')">
  <img src="Images/top/menu_01.gif"id="image7"width="95"height="119"border="0"onMouseMove="move(this,'7')"onMouseout="out(this,'7')">
  （3）編寫(xiě)自定義的JavaScript函數(shù)move()和out()，move()用于設(shè)置鼠標(biāo)移入導(dǎo)航按鈕時(shí)顯示的圖片,，out()用于設(shè)置鼠標(biāo)移出導(dǎo)航按鈕時(shí)顯示的圖片,，代碼如下：
  <script language="javascript">
  //鼠標(biāo)移動(dòng)效果
  var A_Img=new Image();
  function move(imge,num){
  image.src='Images/top/menu_0'+num+'_over.gif';
  }
  function out(image.num){
  image.src='Images/top/menu_0'+num+'.gif';
  }
  </script>
秘笈心法
  Image構(gòu)造器。
  用Image()構(gòu)造器創(chuàng)建圖形的語(yǔ)法格式如下：
  ObjImg=new image()            //創(chuàng)建了一個(gè)新的Image對(duì)象,，并將其賦予變量ObjImg
  ObjImg.src="圖片文件相對(duì)路徑"   //設(shè)置Image對(duì)象的Src屬性
  在利用Image對(duì)象編程之前,，利用<img>標(biāo)記顯示屬性。在HTML中,，要顯示圖片可以用如下語(yǔ)句來(lái)實(shí)現(xiàn)：
  <img src="pictureName.gif"name="ImgName">
  在JavaScript中可以用下來(lái)的方式訪問(wèn)Image對(duì)象：
  document.Img.src="menu_01.gif";