• 締切済み

htmlで画像上にボタンを配置する方法

htmlで画像上にボタンを配置する方法を教えてください。 具体的には、フローチャートの画像の各ステップをボタンで表記し、ボタンをクリックすることで別ページに飛ぶというサイトを考えています。 現在、map要素をつかって画像の各ステップに直接リンクを設定していますが、各ステップをボタンで表記したいです。 ご存知の方がいっらっしゃいましたら、よろしくお願いします。 補足:htmlでフローチャートをつくるのは、難しいので、画像を張り付けて対応しようと思いました。

みんなの回答

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.2

質問内容を愚直に実現しました。 <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/thumb/5/5b/Jis-flowchart-fixed.png/220px-Jis-flowchart-fixed.png" width=220 height=440> </div>

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

 普通にリストでリンクを作成し、スタイルシートで任意の場所に配置すればよいだけですが・・  先日回答した  ⇒イメージマップのhoverについて - HTML - 教えて!goo( http://okwave.jp/qa/q8037489.html )  とか・・

関連するQ&A

専門家に質問してみよう