'Javascript mouseover event to change form submit button image

I am attempting to dynamically change the "src" attribute of a form submit button via JavaScript by containing the form element within a link in order to capture the mouseover event. Here is my code:

<SCRIPT language="JavaScript">
  paypal_img_mouse_over = new Image(120,120); 
  paypal_img = new Image(120,120); 
  paypal_img_mouse_over.src="Paypal_Button_Mouseover.png"; 
  paypal_img.src="Paypal_Button.png"; 

function Paypal_Mouse_Over()
{
  document.Paypal_Button.src=paypal_img_mouse_over.src;
}
function Paypal_Mouse_Out()
{
  document.Paypal_Button.src=paypal_img.src;
} 
</script>

...

And later on, the form element:

...

    <a href="#" onMouseOver="Paypal_Mouse_Over()" onMouseOut="Paypal_Mouse_Out()">
        <input type="image" src="Paypal_Button.png" name="Paypal_Button" id="Paypal_Button" value=" Continue ">
    </a>
</form>

Should this method be working as rollover effect for my form submit image?

javascripthtmlcssformsdom-events


Solution 1:[1]

either use :hover CSS property or jQuery's $.hover() function to achieve this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 evandrix

Related Questions