Change image width/height with Javascript

Question

New to Javascript here, I've been trying to change the size of an image (width/height) in an HTML page whenever a mouseover occurs, however it doesn't seem to work if the styles are set in the CSS page, which is a huge problem for me since I need to use the position property to set the image location.

Here's the code.

HTML:

<a  href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>

CSS:

#mw
{
    position:absolute;
    left:15%;
    top:35%;
    width:146px;
    height:97px;
}

jS:

function big()
{
    document.getElementsByName("image1").style.width=183;
    document.getElementsByName("image1").style.height=121;
}
function small()
{
    document.getElementsByName("image1").style.width=146;
    document.getElementsByName("image1").style.height=97;
}

Answer 1

You can solve it by CSS only. There is a :hover -pseudo class which gets activated once you hover a specific element. For your request, there is no need to use JavaScript.

#mw:hover {
    width: 183px;
    height: 121px;
}

What the above CSS snippet does is: " change width and height to respectively 183px and 121px if you hover an element with id mw ".

Here below is an example of it. click on "Run code snippet" and try to hover the rubic image.

 #mw { position: absolute; left: 15%; top: 35%; width: 146px; height: 97px; } #mw:hover { width: 183px; height: 121px; } 

 <a href="#"> <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw"> </a> 

Answer 2

Just do this:

a:hover {transform:scale(1.5,1.5);}  <here you can set the x and y scaling

with JS you can:

document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});

Answer 3

Simple javascript version, style not required

 var element = document.getElementsByName("image1")[0]; element.setAttribute('width', 146); element.setAttribute('height', 97); function big() { element.setAttribute('width', 183); element.setAttribute('height', 121); } function small() { element.setAttribute('width', 146); element.setAttribute('height', 97); } 

 <a href="#" onMouseOver="big()" onMouseOut="small()"> <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw"> </a>