How can I add an onmouseover event to all drupal forms?

Question

I want to add an onmouseover event to the submit button of all forms on my drupal site.

How can I do this?

Ben

Answer 1

With jQuery:

$(document).ready(function(){
    $('input[type="submit"]').hover(
      function(){ 
        // Do something with $(this)
      }
    );
});

EDIT: Updated with another possible solution since you just need to update the background color.

If you don't care about IE6 support, you can also use the :hover CSS pseudo selector for your submit buttons and don't need any javascript. Make sure all your submit buttons have a class set to them (I'm using 'submit' as the class name in this example).

.submit {
  background-color: #ddd;
}
.submit:hover {
  background-color: #f00;
}

Answer 2

Hi Shawn,

Thanks very much for your answer. I have a custom module already and have put the code in there. However, I am getting an error. The code I have entered is:

function defprofile_init() {
$(document).ready(function(){
$('input[type="submit"]').hover(
function(){
// Do something with $(this)
alert("hi");
}
);
});
}

Do I need to replace the word function with a specific name?

The error I'm getting is:

Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$'

Ben

Answer 3

I have managed to partly resolve my problem by adding the following code to a custom module:

function defprofile_form_alter(&$form, &$form_state, $form_id) {
    $form['submit']['#attributes'] = array('onMouseOver' => "this.style.backgroundColor='#cc0000'",'onMouseOut' => "this.style.backgroundColor='#000'"); }

However, this only works for submit buttons, and I want it to work for all buttons. I've tried replacing 'submit' with 'button' but then the code stops working altogether.