changing image height with javascript not working

experimenting with javascript “animations” can be difficult. there are nuances that aren’t necessarily easily documented everywhere. one i found interesting was being unable to modify the size of an image if you have designated it’s size in a style.

the issue: trying to shrink an image

css code:

#no2 {
	height:776px;
	width:600px
	left: 300px;
	bottom: 150px;
}

html code:

<img src='images/dev2logo.gif' id='no2'/><br/>
<a href="#" onclick="shrinker(); return false;">shrink suckah!</a>

<script type="text/javascript">

  var lstandWidth = 200;
  var lstandHeight = 450;
  var intShrinkCount = 0;

  function shrinker() {
    setInterval(shinklilbylil, 300);
  }

  function shinklilbylil() {
    var lstandFaceImg = new Image();
    if (intShrinkCount < 500 ) {
      lstandWidth = lstandWidth - 3;
      lstandHeight = lstandHeight - 3;
      document.getElementById("lstand").height = lstandHeight;
      document.getElementById("lstand").height = lstandHeight;
    }
  }
</script>

solution: remove the style designation of the width and height for your image. i've seen the width change in size even with leaving the declaration in but the height may not work.

Previous
Previous

Adding Google Dialogflow ES Agent to your website (Squarespace)

Next
Next

is not in the sudoers file