Enlarge image through mouseover using JavaScript

Question

As part of an assignment I have to enlargen an image using JavaScript through a mouseover. When the image is enlarged it shouldn't move any of the other elements on the page however. When the mouse is moved from the image, it should restore back to the original size.

This is the code that I have so far but it just seems to do absolutely nothing.

function imageEnlarge() {

 document.getElementById('1').style.height=100%;
 document.getElementById('1').style.width=100%;
 document.getElementById('1').style.position='absolute';
 }

function imageReset()   { 

 document.getElementById('1').style.height=80%;
 document.getElementById('1').style.width=80%;
 document.getElementById('1').style.position='absolute';
}

<img src="home2.jpg" class="homeimage" alt="View of a beach"
                 id="1" onmouseover="imageEnlarge();" onmouseout="imageReset();"

Any ideas on where I am going wrong. The feedback from my teachers hasn't been the best so I am at a complete loss where to go on this.

Answer 1

Please check this code

 function imageEnlarge() { document.getElementById('1').style.height="100%"; document.getElementById('1').style.width="100%"; document.getElementById('1').style.position='absolute'; } function imageReset() { document.getElementById('1').style.height="80%"; document.getElementById('1').style.width="80%"; document.getElementById('1').style.position='absolute'; } 

Answer 2

Any of the parent for this tag should be having fixed px values for width/height.

Can you check if you have set the width/height for the parent anywhere on the page.