Question

我有一个带有简单静态图像的html页面，如下所示：Image

我需要一种将鼠标（悬停）放在任何物体上的方法，例如 - ＆＃34; BED＆＃34;得到一个工具提示 - ＆＃34;有床＆＃34;。

我知道hover如何在纯html中使用块或任何teg，但我需要一种方法来执行/跟踪用户光标，当它进入特定区域时，显示提示。可能需要一些JS。如何设置这些未知的几何形状及其坐标以实现我的目标？

Answer 1

不需要JS脚本：）

您可以使用图片地图..它们已经过时但应该按照您的预期工作..当您将鼠标悬停在厨房上时，可以运行它并查看标题

我使用this网页来生成＆＃39;图像或热门运动中的矩形和区域..

＆＃13;

<img src="https://www.edrawsoft.com/symbols/simple-home-floorplan.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="This is bad" title="This is bad" href="" coords="520,132,451,48" shape="rect">
    <area target="" alt="This is kitchen" title="This is kitchen" href="" coords="343,204,254,55" shape="rect">
</map>

＆＃13;

Answer 2

除了prev答案，您还可以将此jQuery添加到您的页面。它使工具提示显示更加突出，也更快：

$( function() {
  $( document ).tooltip();
} );

这个原生jQuery函数使用＆＃39;标题＆＃39;属性！别忘了这样添加：

<img title='This is a test!!' src='test.png'>

鼠标悬停在图像部件上显示提示

2 个答案: