Here's my go at it: http://jsfiddle.net/tZqQc/7/
I did the hover events on the <p>
tag instead, but I think I got the same effect you wanted.
The key is the jQuery code:
$("p").mouseenter(function() {
$( "#theimg" ).fadeTo( "slow" , 0.2, function() {});
});
$("p").mouseleave(function() {
$( "#theimg" ).fadeTo( "slow" , 1.0, function() {});
});
and as for the transparent hover question, you technically can do it with imagemapping.. but that's a lot of work for this picture (it's probably not worth it)!