例

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

コードは下記のとおりです。
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>