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>