Onmouseover Change Image Size

[Hemlock]

I wasn't quite sure weather to put this under CSS or Javascript, so replace it if you must.What I am trying to do is change certain style's of an image when someone hovers over the image, I did get to work that the image shifts from opacity, but not I am trying to add a size to it, but I can't get it to function acordingly.

<img src="images/trob.png" width="150px" height="150px" name="trob" class="fade" alt="trob" onmouseover="trob.style.opacity=1; trob.filters.alpha.opacity=100;  trob.style.width='300px'; trob.style.height='300px';" onmouseout="this.style.opacity=0.3; this.filters.alpha.opacity=30;  trob.style.width='150px'; trob.style.height='150px';" />

Did I forget something here or? cause I can't get it to work somehow.

[thescientist]

what about the differing width and height styles you have?

[Hemlock]

Not sure what you mean by that.

[thescientist]

<img src="images/trob.png" width="150px" height="150px" name="trob" class="fade" alt="trob" onmouseover="trob.style.opacity=1; trob.filters.alpha.opacity=100; trob.style.width='300px'; trob.style.height='300px';" onmouseout="this.style.opacity=0.3; this.filters.alpha.opacity=30; trob.style.width='150px'; trob.style.height='150px';" />

[jeffman]

If your browser doesn't support the .filters property (like Firefox) your scriptlet will terminate at that statement and never reach the dimensional statements.

[dsonesuk]

why not use just css<style type="text/css">:visited:hover /*IE6 fix*/, a img.togglesize { cursor: pointer; border-width:0; opacity:0.3; filter:alpha(opacity=30)}a:hover img.togglesize {width:300px; height:300px; opacity:1; filter:alpha(opacity=100)}</style><a href="java script:void(0);"><img src="images/trob.png" width="150" height="150" class="togglesize" /></a>the <a> is required for IE6

[thescientist]

oh yeah, duh!