0

我有以下情况：一个div，里面有条形（具有一定高度的div）来显示图表。在带有条形的主 div 顶部，放置了一个蒙版图像，因此您可以看到图形而不是条形。（我有一个男人和一个女人来展示统计数据，例如见附图）。

这些条附加到鼠标移动事件以在工具提示中显示有关条的信息。

如果我将鼠标悬停在条上，我的 mousemove 不会显示，因为图像挡住了它。是否可以将鼠标悬停在图像上，并且仍然将 mousemove 事件绑定到条形以获取我想要的信息？最终结果是显示带有来自条形图的信息的工具提示。

在此处输入图像描述

4

4 回答 4

2

您可以在图像顶部制作一些额外的 div，并将它们用于悬停。但这可能会有点混乱。

或者你可以制作一个包含四个区域的 HTML 图像映射，每个区域都有一个 onmouseover 属性，这样会更简洁：

<MAP NAME="mymap">
    <AREA SHAPE="RECT" COORDS="0, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar1')" NAME="bar1">
    <AREA SHAPE="RECT" COORDS="100, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar2')" NAME="bar2">
    <AREA SHAPE="RECT" COORDS="200, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar3')" NAME="bar3">
    <AREA SHAPE="RECT" COORDS="300, 0, 100, 400" HREF="" OnMouseOver="tooltip('bar4')" NAME="bar4">
</MAP>
<IMG SRC="mybarmask.png" USEMAP="#mymap" />

这里的坐标很可能是错误的，我不在我的电脑上，所以我无法测试它......

于 2011-03-25T22:01:15.983 回答
1

假设您的宽度相等，则需要：

  1. 查找容器的偏移量： 

    var DOMOffset = function(el) {
    var curleft, curtop;
    curleft = curtop = 0;
    if (el.offsetParent) {
        do {
            curleft += el.offsetLeft;
        curtop += el.offsetTop;
    } while (el = el.offsetParent);
    }
    return [curleft,curtop];
}

  2. 为您想要处理的所有事件附加到您的图像侦听器，并将它们绑定到一个函数，该函数将它们委托给适当的 DOM 元素。类似的东西Math.floor((event.clientX - container_offset_X) / count_of_your_bar * width_of_your_bar)应该为您提供正确 bar 元素的从零开始的索引。委托本身可以通过修改以下代码来完成：

    quickDelegate = function(event, target) {
    var eventCopy = document.createEvent("MouseEvents");
    eventCopy.initMouseEvent(event.type, event.bubbles, event.cancelable, event.view, event.detail, event.pageX || event.layerX, event.pageY || event.layerY, event.clientX, event.clientY, event.ctrlKey, event.altKey, event.shiftKey, event.metaKey, event.button, event.relatedTarget);
    target.dispatchEvent(eventCopy);
};

    event您的图像捕获的原始事件在哪里，并且target是您检测到的 bar DOM 元素。

请注意，我前段时间编写了这个委托函数，我只针对 Firefox 和 Chrome。你可能需要修复一些东西才能让它在 IE 上运行。

于 2011-03-26T00:04:20.350 回答
0

mouseenter 和 mouseleave 甚至可以通过其他元素工作。

于 2011-03-25T22:05:04.700 回答
0

这是我解决这个问题的方法（解决方案）：

对于这些数字中的每一个，我都会有两个图像，一个内部是空白的，所以只有图形的边框，一个从上到下是完全彩色的（橙色）。

那么你可以有这样的东西：

<div class="empty">
    <div class="full">&nbsp;</div>
</div>

具有.empty空图像，background具有适当的高度和宽度以及position:relative. .full具有经过调整height但固定宽度和的彩色全彩色图像position:absolute; bottom: 0; left=0。

然后在鼠标悬停上，.empty或者.full你可以做任何你想做的事情

于 2011-03-25T22:07:30.493 回答