1

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!

Srb1313711
  • 2,017
  • 5
  • 24
  • 35
  • The easiest way is to put all code in javascript. – Seazoux Jul 05 '13 at 15:35
  • Does this question need the `c#` and `razor` tags? – 000 Jul 05 '13 at 15:38
  • Nothing, test the answers, it has what I have said. (I'm spanish, this is the reason that I write bad english, sorry D=) – Seazoux Jul 05 '13 at 15:39
  • Just use JavaScript to change the CSS class to one that has different sizes set. You may need to use the !Important CSS hint as well. Here is a link to how you can change your CSS classes http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript – CraigW Jul 05 '13 at 15:42
  • Thanks for the rapid responses ill give it another go with this new info – Srb1313711 Jul 05 '13 at 15:45

2 Answers2

2

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.

dezman
  • 18,087
  • 10
  • 53
  • 91
1
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.

000
  • 26,951
  • 10
  • 71
  • 101