0

我有一个非常简单的不同颜色条的图像，从左到右“扇形”，有点像这里的巧克力条：

http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg

我想将每个栏变成带有工具提示“弹出窗口”的单独按钮，并且当光标悬停在它们上方时颜色会发生变化。非常喜欢这张图：

http://winstonwolf.pl/clickable-maps/europe.html

我查看了地图源代码，它并没有真正帮助我，但从这个论坛上的搜索看来，我需要使用 x 和 y 坐标来确定可以“点击”的区域。这个对吗？

我找到了一些代码，可以让我在 2 个图像之间创建过渡，这很棒，但是当图像不是方形 div 内的简单方形时，我遇到了麻烦。这是简单转换的代码：

jQuery(document).ready(function(){

jQuery("img.a").hover(
function() {
jQuery(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
jQuery(this).stop().animate({"opacity": "1"}, "slow");
});

});

和CSS：

![div.fadehover {
    position:relative;
    }

img.a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    }

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }][2]

任何帮助我指出正确的方向将不胜感激！

谢谢

Ĵ

4

1 回答 1

1

为了详细说明评论，这个 JS fiddle 可能是您可以旋转图像并为它们设置点击/悬停事件的方式。

http://jsfiddle.net/pSPX6/

这样做意味着您不需要自己进入鼠标坐标，只需让 jQuery/JavaScript 为您整理它们！:)

至于工具提示，您始终可以根据悬停事件中给您的参数定位它，传递给此事件的参数应包含鼠标的 x 和 y 坐标，然后您可以使用它们来定位工具提示。有关我使用的悬停事件的更多信息，请参阅 jQuery 文档：http ://api.jquery.com/hover/

希望这可以帮助！

如果您需要更多说明，请告诉我！

于 2012-06-18T15:26:50.993 回答