Jump to content

Onmouseover Change Image Size


Hemlock
 Share

Recommended Posts

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.

Link to comment
Share on other sites

<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';" />

Edited by thescientist
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...