Javascript 如何使一个小盒子出现在图像的某个部分上？

我有一个使用图像地图的多个部分的图像，我希望这样当用户将鼠标悬停在图像上时，图像的指定部分会出现一个小框，上面有一个按钮，上面写着“单击此处下载PDF”

---

从现在起，我可以单击该区域并将其下载，但我希望在图像的该部分上显示一个小框，并提供下载选项。

为什么不使用本机

标题

attr？它的一部分，因为我需要的弹出窗口将有两个文本和一个按钮在里面。足够公平。你试过什么？你遇到了什么问题？

<img style=" display: block; margin-left: auto; margin-right: auto; padding-bottom: 30px" 
                        src="myimage.png" alt="" width="983" height="634" usemap="#imageMap"/>
                        <map name="imageMap">
                            <area shape="rect" coords="20,400,182,200" href="" style="outline: none">
                            <area shape="rect" coords="480,400,200,200" href="mypdf.pdf" style="outline: none" download>
                            <area shape="rect" coords="650,400,500,220" href="#image4" style="outline: none">
                            <area shape="rect" coords="665,420,900,280" href="#image5" style="outline: none">
                            <area shape="rect" coords="765,425,900,575" href="#image6" style="outline: none">
                            <area shape="rect" coords="250,425,500,575" href="#image7" style="outline: none">
                        </map>