aタグをブロック要素にして擬似的なクリッカブルマップを作成する #CSS

画像の一部の部分にaタグでリンクを張りたいといった場合に使える方法です。

このような実装をする場合、クリッカブルマップを使用するのですが、座標を指定するなど計算が手間なのでより簡単に実装したい場合に。

例

例えば、以下の画像の■の部分に対しクリック要素を貼ります。

コードは下記のとおりです。
aタグをブロック要素にし、幅と高さを指定することでクリック要素の領域を決めることが出来ます。
以下の例の場合は4辺が直線の場合のみ対応ですが、borde-radiusで円形のリンク領域を作成することも出来ます。ただし、より複雑な図形に対しクリック領域をきっちり決めたい場合はクリッカブルマップを使用したほうがよいです。

ex.html


<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css" media="screen">
    body{
        position: relative;
        text-align: center;
    }
    .click{
        position: absolute;
        display: block;
        width: 2%;
        height: 7%;
        background: #000;
    }

    .left{
      left: 382px;
      top: 164px;
    }

    .right{
     right: 382px;
     top: 164px;
    }
</style>
<a href="#" class="click left"></a>
<a href="#" class="click right"></a>
<img src="http://placehold.jp/50/3d4070/ffffff/1000x350.png?text=%E2%96%A0%E2%86%90%E3%81%93%E3%81%93%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E8%A6%81%E7%B4%A0%E3%81%AB%E2%86%92%E2%96%A0" alt="">
</body>
</html>