ｈｔｍｌで画像上にボタンを配置する方法

ｈｔｍｌで画像上にボタンを配置する方法を教えてください。

具体的には、フローチャートの画像の各ステップをボタンで表記し、ボタンをクリックすることで別ページに飛ぶというサイトを考えています。

現在、ｍａｐ要素をつかって画像の各ステップに直接リンクを設定していますが、各ステップをボタンで表記したいです。

ご存知の方がいっらっしゃいましたら、よろしくお願いします。

補足：ｈｔｍｌでフローチャートをつくるのは、難しいので、画像を張り付けて対応しようと思いました。

No.2 回答者： Ogre7077 回答日時： 2013/04/24 15:12

質問内容を愚直に実現しました。

<script>addEventListener('load',function(e){
var go = function(e) { window.location = e.target.href };
var stepLinks = [
/**/ [ 130, 110, 'stepInit.html' ], // ボタンの X座標, Y座標, リンク先
/**/ [ 130, 250, 'stepAdd.html' ], // 座標は画像左上からのピクセル単位指定
/**/ [ 130, 310, 'stepInc.html' ],
];
stepLinks.forEach(function(step){
/**/ var b = document.createElement('button');
/**/ b.href = step[2]; // 少々汚い手口
/**/ b.addEventListener('click', go, false);
/**/ b.style.position = 'absolute'; // 親要素(=画像)からの相対指定
/**/ b.style.left = step[0] + 'px';
/**/ b.style.top = step[1] + 'px';
/**/ b.style.zIndex = +1; // 画像の上に表示する
/**/ b.appendChild(document.createTextNode('詳細'));
/**/ document.getElementById('chart').appendChild(b);
});
}, false);</script>

<div id=chart style="position:relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/th … width=220 height=440>
</div>

No.1 回答者： ORUKA1951 回答日時： 2013/04/24 12:27

　普通にリストでリンクを作成し、スタイルシートで任意の場所に配置すればよいだけですが・・

　先日回答した
　⇒イメージマップのhoverについて - HTML - 教えて！goo( http://oshiete.goo.ne.jp/qa/8037489.html )
　とか・・