[grapevinefires]

Hey!

Forgive me if I should have found a more jquery specialised forum, however I'm really stuck!

I'm trying to add a fade function to an image switch hover state. This is the script I have created so far:

<script type="text/javascript">

$(document).ready(function(){
   // Change the image of hoverable images
   $(".imgHoverable").hover( function() {
       var hoverImg = HoverImgOf($(this).attr("src"));
       $(this).attr("src", hoverImg);
     }, function() {
       var normalImg = NormalImgOf($(this).attr("src"));
       $(this).attr("src", normalImg);
     }
   );
});

function HoverImgOf(filename)
{
   var re = new RegExp("(.+)\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1_hover.$2");
}
function NormalImgOf(filename)
{
   var re = new RegExp("(.+)_hover\\.(gif|png|jpg)", "g");
   return filename.replace(re, "$1.$2");
}

</script>

Currently when you hover over the image, it does switch perfectly, however I'd rather if it wasn't an instant transition. I've tried adding the standard fade function, however I just can't get it working!

I would really appreciate any help you might have.

Thanks!

Abi

[Dormilich]

you probably need to fade on the opacity, see http://api.jquery.com/fadeTo/ (there is an image fade as example). for blending over (fade out one image while fading in the other) I think you would need two images.