JavaScript - Image Map：初學者指南

你好啊，未來的編程超級巨星！今天，我們將踏上一段令人興奮的旅程，進入JavaScript Image Maps的世界。別擔心如果你之前從未寫過一行代碼——我將成為你的友好導遊，我們會一步步來。到了這個教學的結尾，你將能像專業人士一樣創建互動圖像！

JavaScript - Image Map

什麼是Image Map？

在我們深入JavaScript部分之前，讓我們先了解什麼是image map。想像你有一張披薩的圖片，當有人點擊不同的配料時，你希望發生不同的事情。這正是image map所做的——它讓圖片的特定區域可以點擊！

從HTML開始

要創建一個image map，我們從一些基本的HTML開始。別擔心；這其實比聽起來簡單多了！

<img src="pizza.jpg" alt="美味的披薩" usemap="#pizzamap">

<map name="pizzamap">
<area shape="circle" coords="100,100,50" href="#cheese" alt="起司">
<area shape="rect" coords="200,50,300,150" href="#pepperoni" alt="意大利香腸">
</map>

讓我們來分解這段代碼：

我們有一個<img>標籤，用於顯示我們的披薩圖片。
usemap屬性將圖片與我們的地圖相連接。
在<map>標籤內，我們使用<area>標籤定義可點擊的區域。
每個<area>都有一個形狀（圆形或矩形）、坐標和鏈接。

使用JavaScript來增強

現在，讓我們添加一些JavaScript魔法，讓我們的image map更具互動性！

步驟1：選擇元素

首先，我們需要使用JavaScript來抓取我們的元素：

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

這段代碼找到我們的圖片和我們定義的所有可點擊區域。

步驟2：添加點擊事件

現在，讓我們在我們點擊一個區域時讓一些事情發生：

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('你點擊了 ' + this.alt);
});
});

這段代碼為每個區域添加了一個點擊事件。當點擊時，它會顯示一個帶有配料名的警告框。

步驟3：突出顯示區域

讓我們來點視覺效果！當鼠標悬停在一個區域上時，我們將突出顯示該區域：

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

areas.forEach(area => {
const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

這段代碼為每個區域創建了一個半透明的覆蓋，並在鼠标悬停/移出時顯示/隱藏它。

組合所有代碼

這是我們完整的JavaScript代碼：

const img = document.querySelector('img[usemap]');
const areas = document.querySelectorAll('area');

areas.forEach(area => {
area.addEventListener('click', function(event) {
event.preventDefault();
alert('你點擊了 ' + this.alt);
});

const overlay = createOverlay(area);

area.addEventListener('mouseover', () => overlay.style.display = 'block');
area.addEventListener('mouseout', () => overlay.style.display = 'none');
});

function createOverlay(area) {
const overlay = document.createElement('div');
const coords = area.coords.split(',');

overlay.style.position = 'absolute';
overlay.style.left = coords[0] + 'px';
overlay.style.top = coords[1] + 'px';

if (area.shape === 'circle') {
overlay.style.width = coords[2] * 2 + 'px';
overlay.style.height = coords[2] * 2 + 'px';
overlay.style.borderRadius = '50%';
} else {
overlay.style.width = coords[2] - coords[0] + 'px';
overlay.style.height = coords[3] - coords[1] + 'px';
}

overlay.style.backgroundColor = 'rgba(255, 255, 0, 0.3)';
overlay.style.display = 'none';

document.body.appendChild(overlay);
return overlay;
}

結論

恭喜你！你剛剛使用JavaScript創建了一個互動的image map。記得我說過你會像專業人士一樣創建互動圖像嗎？看，你現在就能做到了！

以下是我們學到的重點回顧：

我們從基本的HTML開始，定義我們的圖片和可點擊區域。
我們使用JavaScript選擇這些元素。
我們添加了點擊事件，當區域被點擊時會顯示警告框。
我們在鼠标悬停時創建了視覺反饋，為區域添加了覆蓋高亮。

方法列表

這是我們使用的主要JavaScript方法表格：

方法	描述
`querySelector()`	選擇與CSS選擇器匹配的第一個元素
`querySelectorAll()`	選擇與CSS選擇器匹配的所有元素
`addEventListener()`	為元素附加事件處理器
`preventDefault()`	阻止事件的默認行為
`createElement()`	創建一個新的HTML元素
`appendChild()`	將新子節點添加到元素中

繼續練習和嘗試這些概念。在你意識到之前，你將能夠創建各種互動網頁元素。記住，每個專家都曾經是初學者。快樂編程！

Credits: Image by storyset