如何在imagemap上实现标签弹出窗口

时间:2022-09-10 21:09:39

This is my first time using map tag in html. I assume getting the tags on a image where I want is 'trial and error'

这是我第一次在html中使用map标签。我假设在我想要的图像上获取标签是'试错'

Is it possible to have a tooltip type lable when user does a mouse over on the 'clickable' part of the image? something cooler would be a comic book style tooltip :)

当用户将鼠标悬停在图像的“可点击”部分时,是否可以使用工具提示类型标签?凉爽的东西会是漫画风格的工具提示:)

any ideas?

2 个解决方案

#1


<area .... title="koko" style="cursor: default;" />

You can take what ever cursor shape you want, Just google "css cursor". The title attribute will give you a small floating description on the area.

你可以采取你想要的光标形状,只需google“css cursor”。 title属性将为您提供该区域的小浮动描述。

#2


Here ya go - some example code:

在这里你去 - 一些示例代码:

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

#1


<area .... title="koko" style="cursor: default;" />

You can take what ever cursor shape you want, Just google "css cursor". The title attribute will give you a small floating description on the area.

你可以采取你想要的光标形状,只需google“css cursor”。 title属性将为您提供该区域的小浮动描述。

#2


Here ya go - some example code:

在这里你去 - 一些示例代码:

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>