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

Question

HTML5 で画像の上にボタンを追加する方法はありますか?

たとえば、これが私のHTMLです。

<div><a href="http://www.website.com/family/">
     <img src="http://www.website.com/accordian.jpg" alt="image" />
</a></div>

または、画像の一部を別のページにリンクし、画像の別の部分を別のページにリンクする方法はありますか? 画像を加工してボタン画像を入れて、画像のその部分をポップアップ動画にリンクさせようと考えていました。

また、このビデオをポップアップ ウィンドウに表示するにはどうすればよいですか?

<video width="651" height="358" controls>
 <source src="www.website.com/accordian.mp4" type="video/mp4">
 <object data="www.website.com/accordian.mp4" width="320" height="240">
 </object> 
</video>

Answer 1

Html エリアを使用して、画像に座標を設定し、そのエリアにリンクを張ることができます。例を参照してください:

<img src ="http://www.website.com/accordian.jpg" alt="image"
usemap="#imagemap">

<map name="imagemap">
<area shape="rect" coords="0,0,50,100" href="http://www.website.com/family/" alt="Link">
</map>