Creating multiple transitional buttons from 1 image
<p>I have a very simple looking image of different coloured bars which 'fan' left to right, a bit like the choc bars here:</p>

<p><a href="http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg" rel="nofollow">http://www.lifeafterbagels.com/blog/wp-content/uploads/2012/05/Fanned-Bars.jpg</a></p>

<p>I want to turn into each bar into individual buttons with tooltip 'pop-ups' and colour changes when the cursor hovers over them. Very much like this image map:</p>

<p><a href="http://winstonwolf.pl/clickable-maps/europe.html" rel="nofollow">http://winstonwolf.pl/clickable-maps/europe.html</a></p>

<p>I have looked at the map source code and it doesn't really help me, but from searching on this forum it looks like I need to use x and y coordinates to determine the area that would be 'clickable'. Is this correct? </p>

<p>I found some code which allowed me to create a transition between 2 images, which is great, but when the image is not a simple square inside a square div I run into trouble. This is the code for the simple transition:</p>

<pre><code>jQuery(document).ready(function(){

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

});
</code></pre>

<p>and the CSS:</p>

<pre><code>![div.fadehover {
    position:relative;
    }

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

img.b {
    position: absolute;
    left: 0;
    top: 0;
    }][2]
</code></pre>

<p>Any help to point me in the right direction would be much appreciated!</p>

<p>Thanks</p>

<p>J</p>
