Image resizing using Javascript

Question

I am trying to make an image enlarge itself if a user clicks on it and retain its original size once the cursor is away from it, but the image is not responding, it's an 800 pixel image.

behaviour.js:

document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
    alert('I saw you click');
});

var thumbnailElement = document.getElementById("smart_thumbnail");
thumbnailElement.className ="small";

if (thumbnailElement.className == "") {
    // write here the code that will execute if the image is big
}

index.html:

 <p>An 800 pixel image</p>
        <img id="smart_thumbnail"  src="http://calmground.com/wp-content/galler\
y/our-calm-ground/calm.jpg" class="small"  >

@kinglish, I believe the img.small is a CSS code right, though I didn't copy your code, but I followed everything, seems something is breaking somewhere in my file because it's not running.

Index.html:

<p>An 800 pixel image</p>
                <img id='smart_thumbnail'  src='http://download.baps.org/wallpapers/14.bmp' class='small'  >

behavior.js I edited:

*document.addEventListener("DOMContentLoaded", function(event) {
   //  alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function({
    var theElement = event.target;
    // to toggle class names
    if (theElement.classList.contains('small')) {

        theElement.classList.remove('small');
        theElement.classList.add('large');
    }else {
        theElement.classList.remove('large');
        theElement.classList.add('small');
    }

});

styles.css:

img.small {
    width: 50px;
}

img.large {
    width: 200px;
}

Your code shows no indication that the size of the image is changed whatsoever. If you do this by using a CSS class, you should put the code that changes the classes INSIDE the event listener. — user15517071
– user15517071, Commented May 15, 2021 at 18:37

Prosy A. · Accepted Answer · 2021-05-16 17:46:50Z

1

Here's how to resize the image onClick and resize it again when out of hover:

var enableHover = false;
document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
});

document.getElementById("smart_thumbnail");

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
});

thumbnailElement.addEventListener("mouseleave", function() {
  if (enableHover) {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "A 100 pixel image";
    enableHover = false;
  }
})

.small {
  height: 100px;
}

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail"  src="https://placekitten.com/400/800" class="small">

<style>
  .small {
    height: 100px;
  }
</style>

<p id="label">A 100 pixel image</p>
<img id="smart_thumbnail" src="https://placekitten.com/400/800" class="small">

<script>
  var enableHover = false;
  document.addEventListener("DOMContentLoaded", function(event) {
    alert('Hello!');
  });

  document.getElementById("smart_thumbnail");

  var thumbnailElement = document.getElementById("smart_thumbnail");

  thumbnailElement.addEventListener("click", function() {
    this.classList.toggle('small');
    document.getElementById("label").innerHTML = "An 800 pixel image";
    enableHover = true;
  });

  thumbnailElement.addEventListener("mouseleave", function() {
    if (enableHover) {
      this.classList.toggle('small');
      document.getElementById("label").innerHTML = "A 100 pixel image";
      enableHover = false;
    }
  })
</script>

edited May 16, 2021 at 17:46

answered May 15, 2021 at 20:02

Prosy A.

2,8223 gold badges17 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Emmanuel Over a year ago

I copied your code and I commented mine out to see the results, but its not even clicking not to talk of enlarging

Prosy A. Over a year ago

Go copy the second code snippet. Its all the code you need

Emmanuel Over a year ago

I did copied the code into my html file and it works, but am required to put the code in my behavior.js file but copying it there, it didn't work, but it displayed the javascript alert(Hello), is there any way I can work around this...

Prosy A. Over a year ago

@Emmanuel Did you import the javascript in your header? If so, put it just above the closing body tag.

Collectives™ on Stack Overflow

Image resizing using Javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related