Home/ Questions/Q 4100948
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T20:37:59+00:00

I have a the following situation: a div, with bars in it (divs with

  • 0

I have a the following situation: a div, with bars in it (divs with a certain height) to show a chart.
On top of the main div with the bars, an image a mask is placed, so you can see figures instead of bars. (I have a man and a woman to show stats, see attached image for example).

The bars are attached to a mousemove event to show information about the bars in a tooltip.

If I hover over the bars my mousemove does not show, because the image is blocking it.
Is it possible to hover over the image, and still have the mousemove event bound to the bars to get the information I want? The end result is to show a tooltip with the info from the bars.

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could make some additional divs on top of the image, and use them for the hovering. But that could get a bit messy.

    Or you can make a HTML image map with four areas, each with an onmouseover property, which would be a lot cleaner:

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

    The coords here are most likely wrong, I’m not on my computer so I can’t test it…

    • 0