Question

Firstly I have to say I have no coding experience whatsoever, but will try to explain what I am trying to acheive.

I have the following code with 2 images… blue.png is a color image
bluebw.png is the same image in black and white. Code simply changes images on mouse over.

<script  type='text/javascript'>
$(document).ready(function(){
    $(".blue").hover(function() {
        $(this).attr("src","files/blue.png");
            }, function() {
        $(this).attr("src","files/bluebw.png");
    });
});
</script>

<a href="page-1.html">
<img src="files/bluebw.png" alt="dresses" class="blue" height="300" width="170" />

What I would like to do is the following:

• add the option for fade in/out on mouseover of the 2 images (fast/slow/or none)

• add display text on mouse over with fade in/out on mouseover (fast/slow/or none) after the image fade, format text (font/alignment/top bottom center/background/opacity)

I’m really flying in the dark here 🙂 Any help would be immensely appreciated.

Cheers

Answer 1

Try this:

Suppose you have an HTML structure like this:

<div id="element" style="position:relative;">
   <img src="image1.gif" id="img1" />
   <img src="image2.gif" id="img2" style="display:none" />
</div>

and css :

img {
  position:absolute;
  top:0;
  left:0;
}

jQuery code:

$("#element").hover(function() {
    //fadeout first image using jQuery fadeOut
    $("#img1").fadeOut(200);
    //fadein second image using jQuery fadeIn 
    $("#img2").fadeIn(200);
}, function () {
    //fadeout second image using jQuery fadeOut
    $("#img1").fadeIn(200);
    //fadein first image using jQuery fadeIn
    $("#img2").fadeOut(200);
});

Here is a fiddle for demo

Or you can use css3 transition:

Here is a fiddle using css3 and jQuery.hover as fallback for ie