Change image size with JavaScript

Question

I m trying to change the size of an image with JavaScript  The jS file is separate from the HTML page   I want to set the height and width of an image in the JS file  Any good ways on doing this

User · Accepted Answer

Once you have a reference to your image  you can set its height and width like so   var yourImg   document getElementById  yourImgId    if yourImg  amp  amp  yourImg style        yourImg style height    100px       yourImg style width    200px       In the html  it would look like this    lt img src  src to your img jpg  id  yourImgId  alt  alt tags are key    gt

User · Answer

You can do this     html file     lt img src  src to your img jpg  id  yourImgId   gt      js file    document getElementById  yourImgId   style height    heightpx     The same you can do with the width

User · Answer

Changing an image is easy  but how do you change it back to the original size after it has been changed  You may try this to change all images in a document back to the original size    var i L document images length  for i 0 i lt L   i    document images i  style height    auto     setting CSS value  document images i  style width    auto     setting CSS value    document images i  height        don t need this  would be setting img attribute     document images i  width        don t need this  would be setting img attribute

User · Answer

If you want to resize an image after it is loaded  you can attach to the onload event of the  lt img gt  tag  Note that it may not be supported in all browsers  Microsoft s reference claims it is part of the HTML 4 0 spec  but the HTML 4 0 spec doesn t list the onload event for  lt img gt     The code below is tested and working in  IE 6  7  amp  8  Firefox 2  3  amp  3 5  Opera 9  amp  10  Safari 3  amp  4 and Google Chrome    lt img src  yourImage jpg  border  0  height  real height  width  real width      onload  resizeImg this  200  100    gt    lt script type  text javascript  gt  function resizeImg img  height  width        img height   height      img width   width     lt  script gt

User · Answer

This one has print statement so you can see the result at every stage if     you would like   They are not needed  function crop image  width  height        image width   width      image height   height        print   in function   image  image getWidth    image getHeight         return image     var image   new SimpleImage  name of your image here      print   original   image  image getWidth    image getHeight       crop image 200 300   print   final   image  image getWidth    image getHeight

User · Answer

you can see the result here In these simple block of code you can change the size of your image  and make it bigger when the mouse enter over the image   and it will return to its original size when mouve leave   html    lt div gt   lt img  onmouseover  fifo    onmouseleave  fifo    src  your image            width  10    id  f   gt   lt  div gt    js file   var b 0  function fifo            if b  0               document getElementById  f   width    300              b 1                     else                      document getElementById  f   width    100             b 0

User · Answer

You can change the actual width height attributes like this   var theImg   document getElementById  theImgId    theImg height   150  theImg width   150

[javascript] Change image size with JavaScript

Examples related to javascript

Examples related to image