A-Frameのクリック判定位置がずれる

ARで表示される画像をカーソルに当て、クリックするとリンクに飛ぶというものを制作しています。

現在画像をa-planeで表示していますが、png画像の透過部分が反射してしまうため、光の影響を受けないa-imageで表示したいと思っているのですが、a-imageで表示するとクリックの判定位置がずれてしまいます。

判定位置を画像に合わせる方法を教えていただきたいです。
どうぞよろしくお願い致します。

HTML
1<!doctype HTML>
2<html>
3<head>
4　<meta charset="UFT-8">
5　<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
6　<style type="text/css">
7    body{
8      height: 100%;
9      margin: 0;
10      overflow: hidden;
11      padding: 0;
12      width: 100%;
13    }
14  </style>
15　<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
16　<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
17</head>
18<body>
19<a-scene embedded arjs="debugUIEnabled:false;">
20  <a-assets>
21    <a-image id="AAA" src="images/AAA.png"></a-image>
22    <a-image id="BBB" src="images/BBB.png"></a-image>
23  </a-assets>
24
25  <a-marker preset="custom" type="pattern" url="images/AR.patt">
26    <a-plane src="#AAA" link="href:https://www.google.co.jp; a-image:#AAA"position="-0.5 0 0" rotation="-90 0 0"></a-plane>
27    <a-plane src="#BBB" link="href:https://yahoo.co.jp; a-image:#BBB" position="0.5 0 0" rotation="-90 0 0" ></a-plane>
28  </a-marker>
29
30  <a-entity camera>
31  　<a-entity cursor="fuse: false; fuseTimeout:500" position="-0.015 0.057 -2" geometry="primitive:ring; radiusInner: 0.02; radiusOuter: 0.03" material="color: #FFF; shader: flat"></a-entity>
32  </a-entity>
33</a-scene>
34
35</body>
36</html>