Html 基于图像的链接上的工具提示和自定义光标问题

我在我的网页上有一个图片，用于各种链接-你可以将鼠标悬停在图片上的按钮上，然后单击转到另一个页面-但是当我第一次创建网页时，我遇到了在正确位置获取链接的问题

我在CSS中输入了该图像，这正是我遇到问题的地方。我通过将图像改为HTML格式，然后使用

和

函数来解决这个问题。像这样：

<img src="(my image url)" width="278" height="430" alt="tricorder" usemap="#tricorder">
<map name="tricorder">
<area shape="rect" coords="125,110,235,180" href="/" alt="home" title="home">
<area shape="circle" coords="92,120,9" href="{text:Alpha URL}" alt="link" title="{text:Alpha}">
<area shape="circle" coords="91,140,9" href="{text:Beta URL}" alt="link" title="{text:Beta}">
<area shape="circle" coords="89,160,9" href="{text:Gamma URL}" alt="link" title="{text:Gamma}">
<area shape="circle" coords="88,180,9" href="{text:Delta URL}" alt="link" title="{text:Delta}">
<area shape="circle" coords="83,216,20" href="{text:Library URL}" alt="navi" title="{text:Library}">

也许有一个更简单的方法，但我对任何事情都是新手，这很好用

现在的问题是，我已经在CSS中安装了工具提示和自定义光标。这些对网页的其余部分都很好，但是我的自定义工具提示设置（白色文本、黑色背景等）和自定义光标（悬停在链接上时无手）在悬停在图像链接上时不起作用

我只能假设这是因为我的图像没有受到CSS的影响？？或者类似的东西

如果您需要更多信息，我会尽力澄清，但这是最后一点，以使其更加完美，如果有人能提供帮助，我将不胜感激。

请看这里

问题可能与工具提示配置和/或CSS样式有关。我将上面的代码与下面的CSS一起使用，并正确地呈现了它

.custom-tooltip, .arrow:after {
    background: black;
    border: 2px solid white;
}
.custom-tooltip {color:white;}

以及以下文件：

$( document ).tooltip({ tooltipClass:"custom-tooltip", 
    position: {my:"left+5 center", at:"right center"} });