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

标签 javascript html css

我在 html/php 页面上有一张大图片,我想知道如何指定图片的某些部分以在悬停时显示不同的工具提示。

编辑:我在另一篇文章中找到了这段代码,如何让它显示工具提示而不是警报?我如何指定超过 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>

抱歉,我还在学习这个网站的运作方式。提前致谢!

最佳答案

使用 HTML map 标签,然后为每个区域定义一个标题。

<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>

关于javascript - 将鼠标悬停在图像的一部分上时的工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25899350/

相关文章:

javascript - 如何根据当前选择类聚焦滚动

html - 覆盖溢出 :hidden with z-index

货币字段的 jquery 验证

javascript - 如何使用ajax jquery获取表单字段值并将其作为json发送到服务器

php - 将按钮点击次数限制为每 5 分钟一次

html - 如何更改整个页面的默认滚动条并且仅在一个 div 内

javascript - 尝试修复时菜单项显示不正确和对齐方式发生变化的问题

javascript - setTimeout 可以太长吗?

javascript - 顶部导航上的白框,而 css 动画或切换导航正在进行中

javascript - 如何让浏览器在 beforeunload 事件触发的弹出窗口中显示非英文文本?