CODEWITHSUNDEEP
javascriptjquerycss
syam deth
syam deth

Reputation: 231

Changing Multiple Image Trouble on Mouse over

I have trouble changing multiple images on mouseover. I tried the function below to change the image on mouseover but it didnt work perfectly. With the Onmouseover event the first image fades out slowly then the second image fades in smoothly. After a few seconds the second image fades out slowly and the third image fades in smoothly.

function changeimage(img_id)
{
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000);
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500);
}

Jsfiddle link:

http://jsfiddle.net/XVz95/3/

Upvotes: 1

Views: 209

Answers (3)

SomeShinyObject
SomeShinyObject

Reputation: 7821

Is this like what you want? It allows for an array of image sources, in case you need to add more pictures:

function changeImage(img) {
    var imgSrcArr = [];
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg");
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg");
    imgSrcArr.push("http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg");

    $img = $(img);
    if ($img.is(":visible")) {
        $img.fadeOut(5500, function() {
            var i = imgSrcArr.indexOf($(this).attr("src"));
            i = i+1 >= imgSrcArr.length ? 0 : i+1;
            $(this).attr("src", imgSrcArr[i]).on('load', function() {$(this).fadeIn(5000)})
        });
    } else {
        $img.fadeIn(5000);  
    }
}

$("#pdtimg_1").mouseenter(function() {changeImage(this)});

jsFiddle example

Upvotes: 1

Purple Hexagon
Purple Hexagon

Reputation: 3568

You can do it in jQuery as follows

The Markup:

 <div id="pdtimg_1">
     <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg"/>
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/>
</div>

The javascript:

$( document ).ready(function() {
    $('#pdtimg_1').mouseover(function(){
        $(this).find('img:first').hide();
        $(this).find('img:last').show();
    });

    $('#pdtimg_1').mouseout(function(){
        $(this).find('img:first').show();
        $(this).find('img:last').hide();
    });
});

http://jsfiddle.net/CabK3/

-----------------------------------UPDATE-------------------

$( document ).ready(function() {
$('#pdtimg_1').mouseover(function(){
    var elem  = $(this);
    elem.find('img:first').fadeOut(5000, function() {
        elem.find('img:nth-child(2)').fadeIn(5000, function() {
             elem.find('img:nth-child(2)').fadeOut(5000); 
            elem.find('img:last').fadeIn(5000);
        });
    });


});

});

and 

<div id="pdtimg_1">
<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/men-wedding-rings.jpg"/>

<img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg" style="display: none;"/>
    <img src="http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg" style="display: none;"/>

Upvotes: 1

Arun CH
Arun CH

Reputation: 101

I made your jsfiddle link just works:

function changeimage(img_id)
{
setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_03.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeIn(5000);
    setTimeout(function(){ $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").show(); }, 5000);
    $("#"+img_id).attr("src","http://247nywebdesign.com/Testing/nurses-jewel/php/pdt_images/prdt_05.jpg").fadeOut(5500);
}

http://jsfiddle.net/XVz95/4/

Upvotes: 1

Related Questions