用 JavaScript 最常用的效果就是，當用戶將鼠標移動到圖片上時，會改變網頁上的圖像，這樣頁面就能對用戶的操作及時作出反應，這種稱為 翻轉器（rollover）效果很容易實現，而且有很多應用場合。
創建翻轉器
翻轉器背后的思想很簡單。有兩個圖像，第一個是原始圖像，第二個是替換圖像，當鼠標移動到第一個圖像上時，瀏覽器快速地替換為第二個圖像，就產生了運動或動畫效果。
SimpleRollover.html 腳本，這是在鏈接標簽中實現翻轉器的最簡單方法。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>A Simple Rollover</title> <link rel="stylesheet" href="rollover.css"> </head> <body> <a href="next.html" onmouseover="document.images['arrow'].src='images/arrow_on.gif'" onMouseOut="document.images['arrow'].src='images/arrow_off.gif'"> <img src="images/arrow_off.gif" id="arrow" alt="arrow"> </a> </body> </html>
rollover.css 樣式文件，很多例子中將用到該文件。
@charset "utf-8"; /* CSS Document */ body{ background-color: #FFF; } img{ border-width: 0; } img#arrow, img#arrowImg{ width: 147px; height: 82px; } #button1, #button2{ width: 113px; height: 33px; } .centered{ text-align: center; } #adBanner{ width: 400px; height: 75px; }
腳本執行后，效果如下：
創建更有效的翻轉器
為了產生動畫效果，需要確保替換圖像立刻出現，而不能有從服務器獲得圖像所造成的延遲。為此，使用 JavaScript 預先將所有圖像加載到瀏覽器的緩存中，並且將圖像放進腳本使用的變量中。MoreEffectiveRollover.html 頁面和 MoreEffectiveRollover.js 腳本文件將演示具體的做法。
MoreEffectiveRollover.html 頁面上唯一的 JavaScript 是對外部 MoreEffectiveRollover.js 文件的引用。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>A More Effective Rollover</title> <script src="MoreEffectiveRollover.js"></script> <link rel="stylesheet" href="rollover.css"> </head> <body> <a href="next1.html"><img src="images/button1_off.gif" alt="button1" id="button1"></a> <a href="next2.html"><img src="images/button2_off.gif" alt="button2" id="button2"></a> </body> </html>
這個腳本 MoreEffectiveRollover.js 是比前面更好的實現翻轉器的方法，很靈活。
window.onload = rolloverInit; function rolloverInit(){ for(var i=0; i<document.images.length; i++){ if(document.images[i].parentNode.tagName == "A"){ setupRollover(document.images[i]); } } } function setupRollover(thisImage){ thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = function(){ this.src = this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src = "images/" + thisImage.id + "_on.gif"; thisImage.onmouseover = function(){ this.src = thisImage.overImage.src; } }
腳本執行后，效果和上面一樣，只是動畫更加流暢。
構建三狀態翻轉器
三狀態翻轉器就是能夠顯示圖像的 3 個版本的翻轉器。除了原始圖像和當用戶鼠標移動到圖像上時顯示的圖像外，還有一個就是按鈕本身被單擊時的顯示。
ThreeStateRollovers.html 頁面和上面兩狀態翻轉器相同，而 ThreeStateRollovers.js 腳本只修改幾處而已。
window.onload = rolloverInit; function rolloverInit(){ for(var i=0; i<document.images.length; i++){ if(document.images[i].parentNode.tagName == "A"){ setupRollover(document.images[i]); } } } function setupRollover(thisImage){ thisImage.outImage = new Image(); thisImage.outImage.src = thisImage.src; thisImage.onmouseout = function(){ this.src = this.outImage.src; } thisImage.overImage = new Image(); thisImage.overImage.src = "images/" + thisImage.id + "_on.gif"; thisImage.onmouseover = function(){ this.src = this.overImage.src; } //新增加的第3個狀態 thisImage.clickImage = new Image(); thisImage.clickImage.src = "images/" + thisImage.id + "_click.gif"; thisImage.onclick = function(){ this.src = this.clickImage.src; } }
腳本執行后，單擊按鈕，顯示綠色按鈕，效果如下：
由鏈接觸發翻轉器
前面的例子，都是將鼠標移動到圖像上來觸發翻轉器的，也可以通過鼠標指向文本鏈接時讓圖像翻轉。
LinkRollover.html 頁面中有一個文本鏈接。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Link Rollover</title> <script src="LinkRollover.js"></script> <link rel="stylesheet" href="rollover.css"> </head> <body> <h1><a href="next.html" id="arrow">Next page</a></h1> <img src="images/arrow_off.gif" id="arrowImg" alt="arrow"> </body> </html>
LinkRollover.js 腳本將實現由鏈接觸發的翻轉器。
window.onload = rolloverInit; function rolloverInit(){ //尋找鏈接 for(var i=0; i<document.links.length; i++){ var linkObj = document.links[i]; //指向當前鏈接，判斷鏈接是否有 id 屬性，如果有則創建 imgObj 指向 arrowImg if(linkObj.id){ var imgObj = document.getElementById(linkObj.id + "Img"); if(imgObj){ setupRollover(linkObj, imgObj); } } } } function setupRollover(thisLink, thisImage){ //imgToChange 存儲了鏈接對應的圖像 thisLink.imgToChange = thisImage; thisLink.onmouseout = function(){ this.imgToChange.src = this.outImage.src; } thisLink.onmouseover = function(){ this.imgToChange.src = this.overImage.src; } thisLink.outImage = new Image(); thisLink.outImage.src = thisImage.src; thisLink.overImage = new Image(); thisLink.overImage.src = "images/" + thisLink.id +"_on.gif"; }
腳本執行后，如下效果：
讓多個鏈接觸發一個翻轉器
還可以讓幾個不同的圖像觸發同一個翻轉器。如果需要對多個圖像進行說明，這種技術就非常有用。將鼠標移動到其中一個圖像上時，就會顯示出這個圖像的描述。
我們的例子中正好說明這個技術。
MultiLinksSingleRollover.html ，注意這個頁面上的鏈接和圖像都有唯一的 id。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Links, Single Rollover</title> <script src="MultiLinksSingleRollover.js"></script> <link rel="stylesheet" href="MultiLinks.css"> </head> <body> <div id="captionDiv"> <img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci"> <img src="images/bg.gif" id="captionField" alt="Text Field"> </div> <div id="inventionDiv"> <img src="images/leoText.gif" id="heading" alt="Leonardo's Inventions"> <a href="flyPage.html" class="captionField" id="flyer"><img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a> <a href="tankPage.html" class="captionField" id="tank"><img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a> <a href="heliPage.html" class="captionField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a> </div> </body> </html>
LinkRollover.css，我們定義在 HTML 中引用的類。
@charset "utf-8"; body{ background-color: #EC9; } img{ border-width: 0; } #captionDiv{ float: right; width: 210px; margin: auto 50px; } #captionField{ margin: 20px auto; width: 208px; height: 27px; } #inventionDiv{ width: 375px; margin-left: 20px; } #heading{ margin-bottom: 20px; width: 375px; height: 26px; }
MultiLinksSingleRollover.js 這個腳本將演示如何使用多個鏈接觸發一個翻轉器。
window.onload = rolloverInit; function rolloverInit(){ for(var i=0; i<document.links.length; i++){ var linkObj = document.links[i]; //無法使用翻轉圖像的 id 計算出改變過圖像 id, id 是唯一的，因此使用 className if(linkObj.className){ var imgObj = document.getElementById(linkObj.className); if(imgObj){ setupRollover(linkObj, imgObj); } } } } function setupRollover(thisLink, textImage){ thisLink.imgToChange = textImage; thisLink.onmouseout = function(){ this.imgToChange.src = this.outImage.src; } thisLink.onmouseover = function(){ this.imgToChange.src = this.overImage.src; } thisLink.outImage = new Image(); thisLink.outImage.src = textImage.src; thisLink.overImage = new Image(); thisLink.overImage.src = "images/" + thisLink.id + "Text.gif"; }
腳本執行后，效果如下：
處理多個翻轉器
如果希望觸發翻轉器的圖像本身也是一個翻轉器，那么該怎么辦呢？我們在上一個示例的基礎上進行改進，演示如何添加這個特性。
在將鼠標移動到一個自創圖像上時，與前面一樣，描述圖像會出現，但是現在自創圖像本身也會切換為另一個帶陰影的圖像，這會向用戶提供視覺反饋，明確指出鼠標當前指向的元素。
MultiLinksMultiRollovers.html 除了標題和外部引用外，其余與上一個 HTML 頁面一樣。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Multiple Links, Multiple Rollovers</title> <script src="MultiLinksMultiRollovers.js"></script> <link rel="stylesheet" href="MultiLinks.css"> </head> <body> <div id="captionDiv"> <img src="images/DaVinci.jpg" width="144" height="219" alt="DaVinci"> <img src="images/bg.gif" id="captionField" alt="Text Field"> </div> <div id="inventionDiv"> <img src="images/leoText.gif" id="heading" alt="Leonardo's Inventions"> <a href="flyPage.html" class="captionField" id="flyer"><img src="images/flyer.gif" width="293" height="165" alt="Flying Machine" id="flyerImg"></a> <a href="tankPage.html" class="captionField" id="tank"><img src="images/tank.gif" width="325" height="92" alt="Tank" id="tankImg"></a> <a href="heliPage.html" class="captionField" id="helicopter"><img src="images/helicopter.gif" width="224" height="160" alt="Helicopter" id="helicopterImg"></a> </div> </body> </html>
MultiLinksMultiRollovers.js 腳本處理多個翻轉器。
window.onload = rolloverInit; function rolloverInit(){ for(var i=0; i<document.links.length; i++){ var linkObj = document.links[i]; if(linkObj.className){ var imgObj = document.getElementById(linkObj.className); if(imgObj){ setupRollover(linkObj, imgObj); } } } } function setupRollover(thisLink, textImage){ //因為有更多圖像需要處理，每個翻轉器兩個圖像，用到了數組 thisLink.imgToChange = new Array; thisLink.overImage = new Array; thisLink.outImage = new Array; //textImage 存儲在了 imgToChange[0] 中 thisLink.imgToChange[0] = textImage; thisLink.onmouseout = rollOut; thisLink.onmouseover = rollOver; thisLink.outImage[0] = new Image(); thisLink.outImage[0].src = textImage.src; thisLink.overImage[0] = new Image(); thisLink.overImage[0].src = "images/" +thisLink.id + "Text.gif"; var rolloverObj = document.getElementById(thisLink.id + "Img"); if(rolloverObj){ //新的 rolloverObj 存儲在 imgToChange[1] 中 thisLink.imgToChange[1] = rolloverObj; thisLink.outImage[1] = new Image(); thisLink.outImage[1].src = rolloverObj.src; thisLink.overImage[1] = new Image(); thisLink.overImage[1].src = "images/" + thisLink.id + "_on.gif"; } } function rollOver(){ for(var i=0; i<this.imgToChange.length; i++){ this.imgToChange[i].src = this.overImage[i].src; } } function rollOut(){ for(var i=0; i<this.imgToChange.length; i++){ this.imgToChange[i].src = this.outImage[i].src; } }
腳本執行后，效果如下：
