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.