CODEWITHSUNDEEP
javascripthtmlcss
User2413
User2413

Reputation: 615

Image change onclick using javascript is very fast?

Html and Javascript code:

<img  src="imgs/right.gif" id="image_change" onclick="changeImage()"/>

<script>
    function changeImage() {
var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/")+1);
    if  (imgsrc == "left.gif")
    {
        document.getElementById("image_change").src = "imgs/right.gif";
        alert('if'+document.getElementById("image_change").src);
    }
    else 
    {
        document.getElementById("image_change").src = "imgs/left.gif";
        alert('else'+document.getElementById("image_change").src);
    }

}
</script>

When i click on the image, a new image is replacing in fraction of milli seconds..can i make the replacing of the image slow by using javascript or by adding any css class to it??any help would be appreciated..

Upvotes: 0

Views: 1599

Answers (4)

Weafs.py
Weafs.py

Reputation: 22992

You can do it this way:

function changeImage() {
  setTimeout(function() {
    var src = document.getElementById("image_change").src;
    if (src == "http://s25.postimg.org/iyly1k3uz/arrow_left.png") {
      document.getElementById("image_change").src = "http://s25.postimg.org/tzh36kw3v/arrow_right.png";
    } else {
      document.getElementById("image_change").src = "http://s25.postimg.org/iyly1k3uz/arrow_left.png";
    }
  }, 1000);
}
body {
  background-color: lightblue;
}
<img src="http://s25.postimg.org/tzh36kw3v/arrow_right.png" id="image_change" onclick="changeImage()" />

Upvotes: 0

Md Ashaduzzaman
Md Ashaduzzaman

Reputation: 4038

You can use setTimeout() function of window object to make delay for execution of your code.

Try this :

HTML : 

<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />

javaScript : 

function changeImage() {
    var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/") + 1);
    if  (imgsrc == "Cartoon-6.jpg")
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
        //alert('if'+document.getElementById("image_change").src);
        }, 1000);
    }
    else 
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
        //alert('else'+document.getElementById("image_change").src);
        }, 1000);
    }

}

jsFiddle

Upvotes: 0

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

try this

Using javascript

   var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        alert("here");
    }, 10);
    var img =document.getElementById("image_change");
    fade(img);// Chnage image in fade method

Using jquery

// increase the 500 to larger values to increase the duration 
// of the fadeout and/or fadein
$('#image_change').fadeOut(500, function () {
    $('#image_change').attr("src", "/newImage.png");
    $('#image_change').fadeIn(500);
});

Upvotes: 2

Tauseef Ahmed
Tauseef Ahmed

Reputation: 21

The above jQuery way is straight forward and easy , if you want this in vanilla JavaScript you can use setTimeout with opacity to create fade out and fade in effect for further details check link below

Pure JavaScript fade in function

Upvotes: 1

Related Questions