将鼠标悬停在图像的一部分上时的工具提示

Question

I have a large image on an html/php page and I was wondering how I could specify parts of the image to show different tooltips when hovered over. 我在html / php页面上有一个大图像，我想知道如何将图像的各个部分悬停在显示时显示不同的工具提示。

EDIT: I found this code in another post, how can I make it display tooltips instead of an alert? 编辑：我在另一篇文章中找到此代码，如何使其显示工具提示而不是警报？ And how would I specify more than 1 hover area? 我将如何指定超过1个悬停区域？

<html>
<head>
<script language="JavaScript">
function getDetails(obj){
  clickX = window.event.x-obj.offsetLeft;
  clickY = window.event.y-obj.offsetTop;
  if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200))
  {
    alert(" You are between (100,100) And (200,200) of the Image");
  } 
}
</script>
</head>
<body>
  <img src="image.jpg" onMousemove="getDetails(this)" id="myimg" height="500" width="500" />
</body>
</html>

Sorry I'm still learning how this site works. 抱歉，我仍在学习该网站的工作方式。 Thanks in advance! 提前致谢！

Answer 1

Use HTML map tag, then define a title for each area. 使用HTML地图标记，然后为每个区域定义一个标题。

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

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

将鼠标悬停在图像的一部分上时的工具提示

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-09-17 20:05:37

将鼠标悬停在图像的一部分上时的工具提示

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-09-17 20:05:37

解决方案1
4 已采纳 2014-09-17 20:05:37