jQuery - Calling a function inline

Question

I am trying to pass one variable to a jQuery function inline (i.e.: using an onMouseOver="function();" within the actual link (which is an area tag from an image map)).

The function is only being called if I place it before the $(document).ready(function(){ line, but doing this is causing all sorts of problems with jQuery.

All I want is for a simple tag (such as <area shape="circle" coords="357,138,17" onMouseOver="change('5');" id="5" /> to launch a function that is contained within the normal jQuery body of code.

To illustrate the point, the following works:

<script type="text/javascript">
function myfunction(x)    {  alert(x); //Alerts 2  
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

But the following doesn't

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function myfunction(x)    {  alert(x); //Nothing happens   
}
}
</script>

<img src="/shared_images/loading.gif" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="171,115,516,227"
onMouseOver="myfunction('2')"></map>

Answer 1

In your second example, you've declared myfunction inside the anonymous function you're passing to .ready(). That means myfunction is a local variable, which is only in scope inside that anonymous function, and you cannot call it from anywhere else.

There are two solutions.

First, you can declare it outside (before or after) the call to .ready(). This should not cause any interference with jQuery. If it does, something else is wrong (perhaps a simple syntax error?) that we'd welcome you to bring up in a StackOverflow question.

Second, you shouldn't be using onMouseOver="" to attach event handlers (as that mixes JavaScript with HTML), so let's do away with it entirely. Replace your JavaScript with this:

$(document).ready(function() {
    $("#that-area-down-there").mouseover(function() {
        alert(2);
    });
});

And your HTML with this:

<area shape="rect" coords="171,115,516,227" id="that-area-down-there" />

(Presumably you'll want to replace that id with something more meaningful in context, of course.)