HOWTO · JavaScript
在 JavaScript 中更改懸停影象
指標移入圖片時切換其 `src`，移開時還原原始來源；可使用 JavaScript 事件監聽器或 HTML 事件屬性，也可選用 jQuery `.hover()`。
本頁內容
若要在指標懸停時更換圖片，先儲存原始的 src，指標移入時指定懸停圖片，移開時再還原已儲存的來源。撰寫新程式碼時，JavaScript 事件監聽器可讓行為邏輯與 HTML 分開；原生的 onmouseover 和 onmouseout 屬性也是一種選擇，而 jQuery 的 .hover() 僅適用於已載入 jQuery 的頁面。
指標懸停時圖片切換的運作方式
圖片切換會變更現有 <img> 元素的 src 屬性。請確保兩個圖片路徑都可使用，並保留原始路徑，讓指標移開後圖片能回到起始狀態。這種行為可以透過 mouseover 和 mouseout 事件監聽器、HTML 行內事件處理屬性，或 jQuery 回呼函式來實作。
指標移入圖片時，將其 src 設為懸停圖片；指標移開時，則還原原始的 src。
圖中顯示指標移入時切換圖片來源，以及指標移開時還原原始圖片來源。
使用 mouseover 和 mouseout 事件監聽器切換懸停圖片
這個瀏覽器頁面範例使用本文資源資料夾中的兩張實際圖片。先將原始路徑存入變數，再用成對的事件監聽器切換圖片來源。這是靜態的瀏覽器端程式碼，本資料包未執行此程式碼。程式碼中的圖片替代文字描述保留英文，因為程式碼區塊必須原樣保留。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<img
id="hover-demo"
src="change-image-hover-using-event-listeners.webp"
data-original-src="change-image-hover-using-event-listeners.webp"
data-hover-src="change-image-hover-using-onmouseover-and-onmouseout.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
>
<script>
const image = document.querySelector('#hover-demo');
const originalSrc = image.dataset.originalSrc;
const hoverSrc = image.dataset.hoverSrc;
image.addEventListener('mouseover', () => {
image.src = hoverSrc;
image.alt = 'Abstract still life with dark spheres and curved shapes in blue and orange';
});
image.addEventListener('mouseout', () => {
image.src = originalSrc;
image.alt = 'Abstract still life with a coral disc and teal geometric shapes';
});
</script>
選取器必須符合要更換圖片的元素。只儲存一次 originalSrc，可避免意外還原成懸停圖片的路徑。mouseover 和 mouseout 可能會在指標移過子元素時觸發；對單張圖片而言，通常不難處理。若互動區域較大，使用 mouseenter 和 mouseleave 可能更合適。程式碼中的圖片替代文字描述維持英文。
執行以下範例：
const image = { src: 'original.webp', handlers: {} };
image.addEventListener = (name, handler) => {
image.handlers[name] = handler;
};
const originalSrc = image.src;
const hoverSrc = 'hover.webp';
image.addEventListener('mouseover', () => {
image.src = hoverSrc;
});
image.addEventListener('mouseout', () => {
image.src = originalSrc;
});
image.handlers.mouseover();
console.log(image.src);
image.handlers.mouseout();
console.log(image.src);
hover.webp
original.webp
這個獨立的 Node.js 範例不使用瀏覽器 DOM，示範兩次圖片來源變更。執行結果依序為 hover.webp 和 original.webp；程式碼與輸出區塊中的路徑文字維持英文，因為這些區塊必須原樣保留。在網頁中，請將事件處理函式附加到實際的圖片元素，並使用相對於該頁面可正確解析的路徑。
使用 onmouseover 和 onmouseout HTML 屬性
原生 HTML 事件處理屬性可以直接呼叫 JavaScript 函式，不需要 jQuery。這個精簡的替代做法使用相同的本機圖片檔，並明確指定要操作的圖片。範例中的圖片替代文字描述維持英文，因為程式碼區塊必須原樣保留：
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<img
id="attribute-demo"
src="change-image-hover-using-event-listeners.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
onmouseover="changeDemoImage(true)"
onmouseout="changeDemoImage(false)"
>
<script>
function changeDemoImage(isHovering) {
const image = document.querySelector('#attribute-demo');
image.src = isHovering
? 'change-image-hover-using-onmouseover-and-onmouseout.webp'
: 'change-image-hover-using-event-listeners.webp';
image.alt = isHovering
? 'Abstract still life with dark spheres and curved shapes in blue and orange'
: 'Abstract still life with a coral disc and teal geometric shapes';
}
</script>
在此，onmouseover 會指定懸停圖片，onmouseout 則會還原起始圖片。行內處理函式適合用於簡短示範；隨著頁面內容增加，使用事件監聽器通常更容易將標記與行為分開。
使用 jQuery .hover() 切換圖片
jQuery 的 .hover() 接受兩個回呼函式，分別在指標移入和移開時執行。只有在頁面已載入 jQuery 時才使用此方法；它不是瀏覽器 JavaScript 的一部分。以下瀏覽器範例僅供說明，並假設 jQuery 程式庫已載入；程式碼中的圖片替代文字描述維持英文，因為程式碼區塊必須原樣保留。
本節中的程式碼以及顯示的標籤或輸出仍為英文。
<img
id="jquery-demo"
src="change-image-hover-using-event-listeners.webp"
alt="Abstract still life with a coral disc and teal geometric shapes"
>
<script>
const originalSrc = 'change-image-hover-using-event-listeners.webp';
const hoverSrc = 'change-image-hover-using-onmouseover-and-onmouseout.webp';
$('#jquery-demo').hover(
function () {
$(this).attr('src', hoverSrc);
$(this).attr('alt', 'Abstract still life with dark spheres and curved shapes in blue and orange');
},
function () {
$(this).attr('src', originalSrc);
$(this).attr('alt', 'Abstract still life with a coral disc and teal geometric shapes');
}
);
</script>
第一個回呼函式會在指標移入時執行，第二個則在指標移開時執行。如果 $ 未定義，表示 jQuery 尚未載入，或無法在目前的作用範圍中使用；請改用原生 JavaScript 事件監聽器版本。
測試範例並處理常見問題
瀏覽器範例使用本文資源資料夾中的本機 WebP 圖片，因此請保留這些檔案。如果圖片沒有變更，請查看瀏覽器的開發人員主控台、確認選取器符合某個元素，並檢查兩個路徑的拼字和大小寫是否完全正確。如果懸停圖片有顯示，卻沒有還原，請確認離開事件處理函式已附加到相同元素，且使用的是已儲存的原始路徑。
懸停是指標互動，部分僅使用觸控的使用者無法使用。請勿只透過此效果提供重要資訊；如果使用者需要選取或顯示內容，請提供可見的控制項或其他等效互動。Node.js 範例會示範圖片來源如何切換，但不會顯示瀏覽器圖片；提供的執行證據未包含瀏覽器範例的執行結果。
