Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

submit button rollover not working

I have a submit button at the end of a form.  The button has an image  that I want to change when it's rolled over.  It seems like the first code below should work.  The <img> tag below the button does change when it's rollover over, and it's exactly the same markup as is in the button code. .  So why doesn't the button image change when it's rolled over?.  

 <button id="buyNow" type="submit"><img src='images/buynowButton.jpg' onmouseover="src='images/buynowButton_hover.jpg'" onmouseout="src='images/buynowButton.jpg'" alt="buynowButtons"/></button>

<img src='images/buynowButton.jpg' onmouseover="src='images/buynowButton_hover.jpg'" onmouseout="src='images/buynowButton.jpg'" alt="buynowButtons"/>

Thanks for any ideas.
1 Solution
Hi steva,
The reason it's not working in the button is due to the fact that the mouseover event of the button is overriding its image event, since it's a button element, the mouse events are exclusive and you would have to modify your code to call the onmouseover and onmouseout events of the button itself rather than the image.

For example:
<button id="buyNow" type="submit" onmouseover="this.firstChild.src='http://icons.iconarchive.com/icons/deleket/button/256/Button-Next-icon.png'" onmouseout="this.firstChild.src='http://www.veryicon.com/icon/png/Media/Buttons/Button%20Fast%20Forward.png'"><img src='http://www.veryicon.com/icon/png/Media/Buttons/Button%20Fast%20Forward.png' alt="buynowButtons"/></button>

Open in new window

Your code should be as below
<button id="buyNow" type="submit" onmouseover="this.firstChild.src='images/buynowButton_hover.jpg'" onmouseout="this.firstChild.src='images/buynowButton.jpg'"><img src='images/buynowButton.jpg' alt="buynowButtons"/></button>

Open in new window

stevaAuthor Commented:
PERFECT!   Thanks.

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now