CSSでフレキシブルなusemapの代替を実装

画像中の特定の位置にリンクを貼るusemapは便利ですが、指定単位はpixelのみなのでフレキシブルでの対応は困難です。
そこでusemapの代替えとしてフレキシブル対応のusemapもどきのCSSを書いてみたので書いておきます。

デモ

• Phone
• Mail
• Safari
• Music

1.フレキシブルな領域を作成

縦横を維持したままフレキシブルにサイズが変わる領域を作り、そこに画像を100%で収めます。
何をやるかというと、height:0のdivを作って、padding-topの%指定で高さを取ることで、サイズが変わっても縦横比を維持したdivを作ります。中の要素はposition:absoluteでポジションを指定したいのでposition:relativeを指定しておきます。

まず、padding-topに指定する縦横比を算出します。
ここで使用する画像のサイズは400x200なので、padding-topのサイズは(200/400)*100=50%です

画像：

<div class="usemap">
  <img src="hoge.jpg" alt>
</div>

.usemap {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 50%;
}
.usemap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2.リンク領域を書く

フレキシブルのdiv中にul li aでボタンを追加します。これもまた、height:0のa要素にpadding-topの%指定で高さを取ります。

この画像上のボタンのサイズは64pxです。%に直すと(64/400)*100=16%となります。
縦横1:1なので高さもpadding-top:16%です。

<div class="usemap">
  <img src="hoge.jpg" alt>
  <ul>
    <li><a class="phone" href="phone">Phone</a></li>
    <li><a class="mail" href="mail">Mail</a></li>
    <li><a class="safari" href="safari">Safari</a></li>
    <li><a class="music" href="music">Music</a></li>
  </ul>
</div>

.usemap {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 50%;
}
.usemap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.usemap ul, .usemap ul li { list-style:none; padding:0; margin:0; }
.usemap ul li a {
  width: 16%;
  position: absolute;
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 16%;
}

3.リンク領域を配置

ボタン領域のa要素にはposition:absoluteが指定してあるので、classごとに座標を%で指定して配置していきます。
ボタンの位置は上から8pxのところで並んでいるので(8/200)*100=4%なので、a要素にtop:4%を追記しておきます。

後は、画像の左端から画像上のボタンの左端のpxをもとに計算して、クラスごとにposition:absolute; left:nを指定します。

(左からnピクセル/400)*100

.usemap {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-top: 50%;
}
.usemap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.usemap ul, .usemap ul li { list-style:none; padding:0; margin:0; }
.usemap ul li a {
  width: 16%;
  position: absolute;
  top: 4%;
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 16%;
}
.usemap ul li .btn1 {
  left: 11.75%;
}
.usemap ul li .btn2 {
  left: 32%;
}
.usemap ul li .btn3 {
  left: 52%;
}
.usemap ul li .btn4 {
  left: 72.5%;
}

完成です。いくら引き延ばそうと、いくら縮めようと、ちゃんとボタンのサイズと位置を維持してくれます。