How can I make an image enlarge on a javascript event when its size is set through css?

Question

I have some CSS (Below) defining an images size

#latestImages img 
{
    height: 95px;
    width: auto;
}  

This is affecting these images:

<img src="@images.ImagePath" alt="@images.NameOfImage" />

When i set an onmouseover event to this image like so:

<img src="@images.ImagePath" alt="@images.NameOfImage" onmouseover="this.width=100;this.height=100;" onmouseout="this.width=200;this.height=200;"/>

The images height and width do change in the html when the source is viewed but there is no visible change, but when i removed the css the changes did occur. Does anyone know why this is? And is there anything I can do different to keep the css as is and have javascript enlarging the image? Thanks in advance!

Answer 1

You can use this format in your onmouseover handler: this.style.width="50px" . Or better yet, don't put your JS in your HTML, and write a function for what you are trying to do.

Answer 2

onmouseover="this.style.width='100px';this.style.height='100px';"
onmouseout="this.style.width='200px';this.style.height='200px';"

Styles need units. In this case px . Otherwise it could be pt , in , or em .