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

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

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]

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

谢谢

J