JavaScript是一種廣泛應用于網頁交互的編程語言，這里將介紹JS實現一個圖片鏈接到五個超鏈接的功能。例如，當鼠標覆蓋在圖片上時，能夠展示出五個不同的鏈接，讓用戶可以點擊跳轉到相應的頁面。 首先，我們需要準備一個圖片，以及五個超鏈接。為了更好地展示，我們選擇一個色彩鮮艷、畫面生動的圖片，并跳轉到五個不同的網站，例如：

下面這張圖片將鏈接到五個網站：

// 五個超鏈接，分別指向不同網站
let link1 = 'http://www.link1.com';
let link2 = 'http://www.link2.com';
let link3 = 'http://www.link3.com';
let link4 = 'http://www.link4.com';
let link5 = 'http://www.link5.com';
// 點擊圖片，跳轉到五個不同的鏈接
document.getElementById('image-link').addEventListener('click', function(){
window.location.href = link1;
});

以上是初步的操作，點擊圖片后只會跳轉到其中一個鏈接。為了實現五個超鏈接，我們需要通過JS來控制鼠標移動時，顯示不同的鏈接。

代碼如下：

let image = document.getElementById('image-link');
image.addEventListener('mousemove', function(e){
// 獲取鼠標相對于圖片的位置
let x = e.clientX - image.offsetLeft;
let y = e.clientY - image.offsetTop;
// 獲取圖片的寬高
let width = image.offsetWidth;
let height = image.offsetHeight;
// 設置寬高的一半
let halfWidth = width / 2;
let halfHeight = height / 2;
let link;
// 判斷鼠標位置，在不同的區域內顯示不同鏈接
if(x < halfWidth && y < halfHeight){
link = link1;
} else if(x < halfWidth && y >= halfHeight){
link = link2;
} else if(x >= halfWidth && y < halfHeight){
link = link3;
} else if(x >= halfWidth && y >= halfHeight){
link = link4;
} else{
link = link5;
}
// 動態修改鏈接
image.style.cursor = 'pointer';
image.setAttribute('href', link);
});

以上代碼中，我們監聽了鼠標移動事件，在不同的區域內設置不同的超鏈接。我們首先獲取了鼠標位置的坐標，接著獲取了圖片寬高的一半，以此判斷出鼠標所在的區域。最后，通過動態修改鏈接的方式，實現了五個超鏈接。 總結一下，JavaScript實現一個圖片鏈接到五個超鏈接的功能并不難，只需要在代碼中設置好鏈接，并監聽鼠標事件動態修改鏈接即可。這樣的功能在網頁交互中十分常見，學習JS能夠讓我們掌握更多的交互技巧，提升頁面的用戶體驗。