コピペで簡単に設置できるクリッカブルマップをレスポンシブ対応するJavascriptソースコード
■使い方
以下のJavascriptを<head></head>のタグ内にコピペで入れるだけで、クリッカブルマップがレスポンシブ対応になります。
<script>
class TMamResponsive{
constructor(){
this.alloc=[];
let imgs=document.querySelectorAll("img");
let maps=document.querySelectorAll("map");
for(let i=0;i<imgs.length;i++){
let usemap=imgs[i].getAttribute("usemap");
if(usemap!==null){
usemap=usemap.replace('#','');
for(let j=0;j<maps.length;j++){
let name=maps[j].getAttribute("name");
if(name!==null){
//img.usemapとmap.nameが等しい場合
if(usemap==name){
if(maps[j].children.length>0){
let l=this.alloc.length;
this.alloc[l]=[];
this.alloc[l].img=imgs[i];
this.alloc[l].nw=imgs[i].naturalWidth;
this.alloc[l].maps=[];
let areanum=0;
for(let k=0;k<maps[j].children.length;k++){
if(maps[j].children[k].tagName=='AREA'){
this.alloc[l].maps[areanum]=[];
this.alloc[l].maps[areanum].area=maps[j].children[k];
this.alloc[l].maps[areanum].coords=this.alloc[l].maps[areanum].area.getAttribute("coords");
areanum++;
}
}
break;
}
}
}
}
}
}
window.addEventListener('resize',function(){
this.resize();
}.bind(this));
this.resize();
}
resize(){
for(let i=0;i<this.alloc.length;i++){
let style=window.getComputedStyle(this.alloc[i].img);
let w=parseInt(style.width);
for(let j=0;j<this.alloc[i].maps.length;j++){
let v=this.alloc[i].maps[j].coords.split(',');
for(let k=0;k<v.length;k++){
v[k]=v[k]*w/this.alloc[i].nw;
}
let c=v.join(',');
this.alloc[i].maps[j].area.setAttribute("coords",c);
}
}
}
}
window.addEventListener('load',function(){
MamResponsive=new TMamResponsive;
});
</script>
■使用例
ブラウザの幅を狭くしたり広くしたりしてもクリッカブルマップのクリック領域はレスポンシブに対応しています。
<img src="./imgs/js_clickable_map_responsive.png" usemap="#imgmap" style="max-width:100%;" />
<map name="imgmap">
<area shape="poly" coords="36,120, 98,106, 126,44, 154,108, 218,120, 176,172, 184,224, 126,218, 70,246, 76,174" href="javascript:alert('星をクリック');">
<area shape="rect" coords="300,60, 466,246" href="javascript:alert('正方形をクリック');">
<area shape="circle" coords="648,158, 94" href="javascript:alert('円をクリック');">
<!-- <area shape="default" href="javascript:alert('図形以外をクリック');"> -->
</map>