JavaScriptFAQ（十三）——圖片

kjmeng發表於2009-01-03
JavaScript

十一、圖片 

1. OnMouseOver效果（OnMouseOver Effects）

Q：我如何在使用者滑鼠放到圖片上時更改這個圖片？

A：這裡一個簡單的例子：This image changes when you point at it!

滑鼠移到檔案上，它就會開啟。滑鼠移走，它就會關閉。

在這個例子中，影像是2.gif，而圖片是1.gif。它們都儲存在../hi-icons資料夾中。為了實現“mouseover”效果，<IMG>標記被嵌入到一個超連結中，由這個超連結來處理onMouseOver和onMouseOut事件：



<a href="#any_URL"
onMouseOver="handleOver();return true;" 
onMouseOut="handleOut();return true;" 
><img name=imgName width=17 height=15 border=0 
alt="This image changes when you point at it!"
src="../hi-icons/2.gif"
></a>


在該頁的<HEAD>部分，我們使用JavaScript程式碼，預先載入了圖片檔案，並且定義了事件處理函式：



<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img_on =new Image();  img_on.src ="../hi-icons/1.gif"; 
 img_off=new Image();  img_off.src="../hi-icons/2.gif"; 
}
function handleOver() { 
 if (document.images) document.imgName.src=img_on.src;
}
function handleOut() {
 if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>





這裡還有一個包含了幾個圖片的複雜一些的例子：This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it! This image changes when you point at it!


程式碼和上面的很相似，除了這個事件處理器將圖片的編號作為了輸入引數。（要檢視實際的程式碼，可以檢視本頁原始碼。）


 


2. OnMouseDown效果（OnMouseDown Effects）


Q：我如何在使用者點選圖片時改變它？


A：這個非常類似與onMouseOver效果。然而這個頁面介紹的技術，只能在Netscape 4.x或者Internet Explorer 4.x（或者更新的瀏覽器中）實現，因為3.x版本的瀏覽器都不支援onMouseDown和onMouseUp事件。


這是一個簡單的例子：This image changes when you press the mouse button!


當滑鼠指向資料夾時按下滑鼠，它就會開啟。放開滑鼠，它就會關閉。


這個例子中<IMG>標籤被嵌入到一個包含了onMouseDown、onMouseUp和onMouseOut事件處理器的超連結中：




<a href="#any_URL"
onMouseDown="handlePress();return true;" 
onMouseUp="handleRelease();return true;" 
onMouseOut="handleRelease();return true;" 
onClick="return false;"
><img name=imgName width=17 height=15 border=0 
alt="This image changes when you press the mouse button!"
src="../hi-icons/2.gif"
></a>


在本頁的<HEAD>區域中，我們使用JavaScript預先載入這些圖片，並定義了事件處理函式：



<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 img_on =new Image();  img_on.src ="../hi-icons/1.gif"; 
 img_off=new Image();  img_off.src="../hi-icons/2.gif"; 
}
function handlePress() { 
 if (document.images) document.imgName.src=img_on.src;
}
function handleRelease() {
 if (document.images) document.imgName.src=img_off.src;
}
//-->
</script>



這裡有一個包含了幾個圖片的複雜一些的例子：This image changes when you point at it!     


程式碼和上面的很相似，除了這個事件處理器將圖片的編號作為了輸入引數。（要檢視實際的程式碼，可以檢視本頁原始碼。）


 


3. 圖片按鈕（Buttons with Images）


Q：我能建立可按下的圖片按鈕嗎？


A：可以。每一個按鈕需要兩個圖片：一個是“按下的按鈕”，另一個是“釋放的按鈕”。試一下下面的例子：將滑鼠指標放到下面的按鈕上，按下滑鼠左鍵——按鈕圖片會變為“按下”狀態。觀察按鈕變回“釋放”狀態時按鈕圖片的變化，將（按下的）滑鼠移出圖片，然後釋放滑鼠。


Index Home 


在這個例子中，“按下的按鈕”圖片是btn1down.gif和btn2down.gif；“釋放的按鈕”圖片是btn1up.gif和btn2up.gif。為了讓按鈕“可以按下”，每一個<IMG>標記都包含在了有onMouseDown、onMouseUp、onMouseOut和onClick事件處理器的超連結中：




<a href="indexpg.htm"
onMouseDown="pressButton(`btn1`);return true;" 
onMouseUp="releaseButton(`btn1`);return true;" 
onMouseOut="releaseButton(`btn1`);return true;" 
onClick="return true;"
><img name=btn1 width=60 height=22 border=0 
alt="Index"
src="btn1up.gif"
></a>
<a href="startpag.htm"
onMouseDown="pressButton(`btn2`);return true;" 
onMouseUp="releaseButton(`btn2`);return true;" 
onMouseOut="releaseButton(`btn2`);return true;" 
onClick="return true;"
><img name=btn2 width=60 height=22 border=0 
alt="Home"
src="btn2up.gif"
></a>


該頁的<HEAD>區域包含預載入圖片檔案和定義事件處理函式的JavaScript程式碼：




<script language="JavaScript">
<!--
// PRELOADING IMAGES
if (document.images) {
 btn1_down=new Image(); btn1_down.src="btn1down.gif"; 
 btn1_up  =new Image(); btn1_up.src  ="btn1up.gif"; 
 btn2_down=new Image(); btn2_down.src="btn2down.gif"; 
 btn2_up  =new Image(); btn2_up.src  ="btn2up.gif"; 
}
// EVENT HANDLERS
function pressButton(btName) {
 if (document.images)
  eval(`document.`+btName+`.src=`+btName+`_down.src`);
}
function releaseButton(btName) {
 if (document.images)
  eval(`document.`+btName+`.src=`+btName+`_up.src`);
}
//-->
</script>











相關文章