イメージマップ(クリッカブルマップ)を超簡単に拡大縮小する方法 #イメージマップ

概要

イメージマップをレシポンシブにする方法で検索すると
「jQuery-rwdImageMaps」を利用する方法が圧倒的に多いのですが
もっと簡単な方法を見つけました。（一部では常識なのかもしれませんが...）

とにかく「jQuery」も「jQuery-rwdImageMaps」も不要です。
javascriptで拡大縮小を指定すればレシポンシブにも対応できます。
※レシポンシブに対応する方法は今回は割愛

方法

CSS の transform を設定するだけです。
※画像の左上を原点として1.5倍に拡大する例です。

transform-origin:left top;
transform: scale(1.5,1.5);

例

<html><head>
<style>
  img{
    transform-origin:left top;
    transform: scale(1.5,1.5);
  }
</style>
</head>
<body>
<p><img src="（画像URL）" alt="サンプル" usemap="#example" width="500" height="200"></p>
<map name="example">
  <area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
  <area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
  <area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
</map>
</body></html>

備考

間違いなど何かお気づきの点などございましたら、ご指摘いただけますと幸甚です。