Question

I have a form that has nine (yes 9) buttons and I have been requested by the client to provide mouse over action on each one of them. I am very comfortable with standard mouse overs using CSS and background images, but not with how to effectively swap out an image in something like this:

<input type="image" src="images/fl-ounces.jpg" name="fluidOunces" alt="" />

I have searched far and wide on Google and found one dated (2004) option here but I keep thinking there has got to be a better way. I would appreciate some guidance on this.

Thanks!

Answer 1

How about this:

<input type="image" src="images/fl-ounces.jpg" name="fluidOunces" alt="" onmouseover="this.src='images/some_image.jpg'" onmouseout="this.src='images/fl-ounces.jpg'" />