Question

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

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

当光标悬停在工具提示“弹出窗口”和颜色更改时，我想将每个条形变成单独的按钮。非常像这张图片地图：

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

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

我找到了一些代码，它允许我在两个图像之间创建一个过渡，这很棒，但是当图像不是方形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]

非常感谢任何帮助我指明正确方向的帮助！

由于

Ĵ

Answer 1

要详细说明评论，这个JS小提琴可能就是如何旋转你的图像并为它们设置点击/悬停事件。

http://jsfiddle.net/pSPX6/

这样做意味着您不需要自己进入鼠标坐标，只需让jQuery / JavaScript为您排序！：）

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

希望这有帮助！

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

从1张图像创建多个过渡按钮

1 个答案: