# [JS]讓lightbox2支援map的area標籤

- URL: https://justfly.idv.tw/js%e8%ae%93lightbox2%e6%94%af%e6%8f%b4map%e7%9a%84area%e6%a8%99%e7%b1%a4/
- 日期: 2012-08-04
- 分類: WEB&RIA
- 標籤: html, javascript

lightbox2是一個wp很方便的外掛，但是大部分的用法就是在點選小圖然後用lightbox方式看大圖。

https://justfly.idv.tw/wp-content/uploads/2012/08/IMG_3426.jpg

但是，其實他也可以用a標籤加上rel=”lightbox”來播放圖片：

```
2012 江戶川花火
```

[2012 江戶川花火](/wp-content/uploads/2012/08/IMG_3426.jpg)

但是，如果我們要用map的area標籤的話，就沒這麼開心了….

查了很多資料後，發現這應該是lightbox.js的bug。所以打開lightbox.js修改一下其中的start function(約在210行左右)。找到：

```
new Effect.Appear('stimuli_overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
imageArray = [];
imageNum = 0;

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName( imageLink.tagName);
var stimuli_image_title = "";
```

加入:

```
imageLink.rel = imageLink.getAttribute('rel');
```

找到：

```
var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];
```

改成：

```
if(imageLink.childNodes[0] !== undefined){
	var possibleLightboxImageTitles = [imageLink.getAttribute('title'), imageLink.childNodes[0]['title'], imageLink.childNodes[0]['alt'], " "];
}else{
	var possibleLightboxImageTitles = [" ", " ", " ", " "];
}
```

如此，就可以用

```

```

指定在圖片的左上方(0,0)到(100,100)的區域為按鈕，點選顯示lightbox的大圖嚕～

例：