Question

I have this:

<img border="0" onmouseout="hidetips();" onmouseover="showtips();" src="image.gif">

<script type="text/javascript">
$(document).ready(function() {
    $("img").each(function(index){
        $(this).attr("onmouseout", "hidetips();newfunction();");
    });
});
</script>

I tried above but it is not working, anyone one know how to add extra newfunction() at behind on the onmouseout attribute?

Answer 1

Use the mouseout method to bind an event handler. Use an anonymous function to contain calls to the separate functions:

$(document).ready(function() {
  $("img").mouseout(function() {
    hidetips();
    newfunction();
  });
});

Note: It will bind all found elements in the jQuery object, so you don’t have to loop.

Edit:

You can bind the showtips function using jQuery also, so that you don’t need the event attributes in every image element:

$(document).ready(function() {
  $("img").mouseover(showtips).mouseout(function() {
    hidetips();
    newfunction();
  });
});