CODEWITHSUNDEEP
htmlimagefirefoxbuttononmouseover
dgeare
dgeare

Reputation: 2658

Firefox image button onmouseover event doesn't fire

quick question. I've replaced the buttons on my site with my own pretty PNG's. Then just wrapped the image in a submit button markup. Easy peasy right? For clarity...

<button type='submit' style='border: 0; background: transparent;'>
    <[img tag here] />
</button>

Then to make them feel interactive, there's a secondary button with a slightly different lighting effect for the image onmouseover event. Everything works great with chrome but not with firefox. For the record, I have the same setup with some anchor tags which DO work in firefox, so it's specific to the submit buttons. It looks like firefox is trapping the onmouseover event in the button node, and it doesn't reach the image tag. Suggestions?

NOTE the onmouseover is coded into the html tag itself. I would really prefer not to have to move the code to a separate listener (too many buttons, this feels cleaner for me).

Thanks for your time in advance!

Edit sorry - guess i might as well have included it, just incase >_<'

<button type='submit' style="border: 0; background: transparent;">
   <img class='med_button' style='padding:0;margin:0 0 0 -8px;' src='<?php echo base_url().'assets/images/login_indent_green.png'; ?>' alt='login' onmouseover="src='<?php echo base_url().'assets/images/login_indent_green_hover.png'; ?>'" onmouseout="src='<?php echo base_url().'assets/images/login_indent_green.png'; ?>'" />
</button>

Upvotes: 0

Views: 485

Answers (1)

Miljan Puzović
Miljan Puzović

Reputation: 5820

It is much easier if you do something like this

<input type="image" class="someclass" />

And then set in CSS background image for class "someclass" and :hover event.

Upvotes: 1

Related Questions