CODEWITHSUNDEEP
javascripthtmlcss
Officer Erik 1K-88
Officer Erik 1K-88

Reputation: 199

How to change the size of an image on click?

Well, I am trying to get an image to change from one size to a smaller size and then back to the other size with just one click. (you are clicking the image.) I have tried a good amount of options, but I haven't gotten it to change to a different size on click.

Here is the HTML part of the code (that is in question):

<p>Money: $<a id="clicks">0.00</a></p>
    <img src="Money.png" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

Here is the Javascript part of the code (that is in question):

var clicks = 0.00;
    function moneyOne() {
        clicks += 0.01;
        document.getElementById("clicks").innerHTML = clicks;
    };

Here is the CSS part of the code (that is in question):

.clicked {
  width: 410px;
  height: 200px;
  transition-property: width, height;
  transition-duration: 1s;
}

.clicked: {
  width: 400px;
  height: 190px;
}

Upvotes: 0

Views: 1899

Answers (4)

Gnommy
Gnommy

Reputation: 11

You need to use the pseudo-class :active like that:

.clicked:active {
    width: 400px;
    height: 190px;
}

Upvotes: 1

epascarello
epascarello

Reputation: 207501

I would use trandsform, transition, and a timeout to remove the class.

var clicks = 0.00;
var timer;
var img = document.querySelector(".clicked");

function moneyOne() {
  clicks += 0.01;
  document.getElementById("clicks").innerHTML = clicks.toFixed(2);
  img.classList.add("active");
  if (timer) window.clearTimeout(timer);
  timer = window.setTimeout(function() {
    img.classList.remove("active");
  }, 200);
};
.clicked {
  width: 410px;
  height: 200px;
  transition: all .2s ease-in-out;
  transform: scale(1);
}

.clicked.active {
  transform: scale(.6);
}
<p>Money: $<a id="clicks">0.00</a></p>
<img src="https://stackoverflow.design/assets/img/logos/se/se-icon.svg" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

Upvotes: 0

Seabyte
Seabyte

Reputation: 390

var clickActive = false;
var waitTime = 150;


document.querySelector("img").onclick = function() {
  if(!clickActive) {
    clickActive = true;
    this.style.animation = "getSmaller "+waitTime+"ms";
    setTimeout(()=>{
      this.style.animation = "";
      clickActive = false;
    }, waitTime);
  }
}
@keyframes getSmaller {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(0.8);
  }
  100%{
    transform: scale(1);
  }
}

/* for testing */
img {
  background: blue;
  width: 200px;
  height: 200px;
}
body {
  margin: 60px;
}
<img src="">

Upvotes: 1

Samathingamajig
Samathingamajig

Reputation: 13245

Adding the pseudo state :active works how you appear to want it.

var clicks = 0.00;
    function moneyOne() {
        clicks += 0.01;
        document.getElementById("clicks").innerHTML = clicks;
    };
.clicked {
  width: 410px;
  height: 200px;
  transition-property: width, height;
  transition-duration: 1s;
}

.clicked:active {
  width: 400px;
  height: 190px;
}
<p>Money: $<a id="clicks">0.00</a></p>
    <img src="https://stackoverflow.design/assets/img/logos/se/se-icon.svg" alt="Increase Money" title="Click Me to increase the Money." type="button" onclick="moneyOne()" class="clicked">

Upvotes: 0

Related Questions