CODEWITHSUNDEEP
javascriptjqueryformattinghoveronmouseover
pckeys
pckeys

Reputation: 3

jquery mouseover with fade and text

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:

I'm really flying in the dark here :) Any help would be immensely appreciated.

Cheers

Upvotes: 0

Views: 3969

Answers (1)

Nemoy
Nemoy

Reputation: 3427

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

Upvotes: 1

Related Questions