CODEWITHSUNDEEP
javascripthtml
agentofvictory
agentofvictory

Reputation: 11

Is there a way to switch images src back to original after on.click src change event?

I'm a noob working my way to learn JavaScript on my own and using some resources but want to probe things on my own hence trying this thing but it's not working for some reason. Help is appreciated.

The object is to clarify some blurred images by swapping the source. The images are called zero.jpg/zeroblur.jpg, one.jpg/oneblur.jpg and so on... The page loads with blurred image sources until clicked on. I want to write code so that it goes back to original blurred source image after 5 secs.

P.S.: The code in comments is what I've tried to write on my own.

window.onload = init;
function init() {
  var blurryPic = document.getElementsByTagName("img");
  for (var i = 0; i < blurryPic.length; i++) {
    blurryPic[i].onclick = clarify;
    // setTimeout(resetPic, 5000);
  }
}

function clarify(eventObj) {
  var pic = eventObj.target;
  var id = pic.id;
  id = "images/" + id + ".jpg";
  pic.src = id;
}

// function resetPic(eventObj) {
//   var pic = eventObj.target;
//   var id = pic.id;
//   id = "images/" + id + "blur.jpg";
//   pic.src = id;
// }

Upvotes: 1

Views: 88

Answers (4)

Makwana Prahlad
Makwana Prahlad

Reputation: 967

Please try this code,To Is there a way to switch images src back to original after on.click src change event?

It switches back because by default, when you click a link, it follows the link and loads the page. In your case, you don't want that. You can prevent it either by doing e.preventDefault(); 

$(function() {
 $('.menulink').click(function(){
   $("#bg").attr('src',"img/picture1.jpg");
   return false;
 });
});

I hope this code will be useful.

Thank You.

Upvotes: 0

agentofvictory
agentofvictory

Reputation: 11

Thanks for all the answers! I wanted to get it done in JS only so CSS wouldn't work. Appreciate the answers and will definitely incorporate in future projects!

P. S. This is what got it done in the end. 

window.onload = init;

function init() {
  var blurryPics = document.getElementsByTagName("img");
  for (var i = 0; i < blurryPics.length; i++) {
    blurryPics[i].onclick = clarify;
  }

function clarify(eventObj) {
  var pic = eventObj.target;
  var id = pic.id;
  id = "images/" + id + ".jpg";
  pic.src = id;

  setTimeout(reBlur, 3000, pic);
}

function reBlur(eventObj) {
  var pic = eventObj.target;
  var id = pic.id;
  id = "images/" + id + "blur.jpg";
  pic.src = id;
}

Upvotes: 0

Anthony
Anthony

Reputation: 56

I used an if statement for this to check if the first loaded image file was present or not. Then use the attribute src for the file. Here's an example.

#javascript
function magicChanger(){
    var myImage = document.getElementById("emailImage")
    if (myImage.getAttribute("src") == "first loaded image"){
        myImage.setAttribute("src", "second image")
    }
    else{
        myImage.setAttribute("src", "first loaded image")
    }
}

#html element
<button id = "emailButton" onclick="magicChanger()">
    <img id="emailImage" src="{% static 'GoEnigmaPics/emailIcon.png' %}" alt="email">
</button>

Upvotes: 0

djcaesar9114
djcaesar9114

Reputation: 2137

It's better with CSS: your image stays the same and you only toggle a class, the class making your image blur.

document.getElementById("clickImg").addEventListener("click", function() {
    this.classList.toggle("blurImg")
})
.blurImg {
  -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}
<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">

If what you want is really to be able to reset the original image, I think it's better to stock it in a specific attribute, like this:

document.getElementById("reset").addEventListener("click", function() {
    document.getElementById("clickImg").src = document.getElementById("clickImg").getAttribute('origSrc')
})

var imgs = [
  'https://vignette.wikia.nocookie.net/spongebob/images/d/d7/SpongeBob_stock_art.png/revision/latest?cb=20190921125147',
  'https://static.vecteezy.com/system/resources/previews/000/072/351/non_2x/spongebob-squarepants-vector.jpg',
  'https://upload.wikimedia.org/wikipedia/en/c/c7/BattleForBikiniBottom.jpg'
]

document.getElementById("random").addEventListener("click", function() {
    document.getElementById("clickImg").src = imgs[Math.floor(Math.random() * 3)]
})
<input type="button" value="RESET" id="reset" />
<input type="button" value="RANDOM" id="random" /><br/>

<img src="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" origSrc="https://www.muralsticker.com/23751-thickbox/autocollants-en-vinyle-pour-enfants-spongebob-squarepants.jpg" id="clickImg">

Upvotes: 1

Related Questions