Hotspot/Hover Zone on a web page

Question

Hi,

I can't recall what the process is called but I need a means of creating like a hotspot zone on a web page, so that, when the user hovers there mouse pointer over this zone, the cursor changes to a pointer, which will then allow the user to go to a particular site.

Pls note that I am not referring to a simple anchor tag around an image, I am specifically after a means of determing coordinates on a web page which will then turn this area into a hover zone.

Hope this makes sense.

Hopefully someone can let me know how to do this as I'm quite sure that something like this exists.

Thanks.

Answer 1

Sounds like a simple anchor that is absolutely positioned

Answer 2

A very simple solution is to position an anchor tag to a specific point on the page.

<a id="hotspot" href="#!link">hidden hotspot</a>

#hotspot {
  position: absolute;
  width: 100px;
  height: 100px;
  background: transparent;
  display: block;
  top: Xpx;
  left: Xpx;
  text-indent: -10000px;
}

Answer 3

Although I'd recommend the absolutely positioned links as mentioned above, it sounds like you're looking for an image map.

Answer 4

Others have suggested positioned anchor tags, but since you mention coordinates, it almost sounds like you're looking for an old-school imagemap. It's ancient, but if you want some arbitrary shapes, maybe it's an option. Remember these?

<img src="yourpic.png" width="500" height="400" usemap="#themap">
<map name="themap">
    <area shape="polygon" coords="0,0,100,0,100,100,0,100" href="..." id="foo" />
    <area shape="circle" coords="150,30" href="..." id="bar" />
</map>

I don't know the specifics of your requirement, but maybe you could throw something together with a big blank image, define a bunch of polygons and/or circles, add some hover behaviors to each area, and go from there.