mouse over call function

[borisjake]

I want to call a JavaScript function on mouse over on a link.
This is the link with the function in.

<a href="http://www.squidgytriangles.co.uk/index.php?page=home" onmouseover="movetri()">HOME</a>

and here is the code that is in the head

<script src="http://code.jquery.com/jquery-1.4.4.js">

    function movetri(){
        alert("lol");
        
        $("#triangles").animate({
                                left: "20",
                                             }, 500 );
        
        
    }
    

</script>

The aim of this code of this code it to animate a small triangle in a div to move using jqeury on mouse over, am I doing this wrong? Is there a better way of doing this?

OH one more thing to point out, this function isn't working even if I remove the jquery stuff, the alert isn't showing :/

[Crhem van der B]

Of course it doesn't work. It's suppose to be:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
    function movetri(){
        alert("lol");
        
        $("#triangles").animate({
                                left: "20",
                                             }, 500 );
        
        
    }

</script>

[Ortzinator]

You should use jQuery's event hooks so you don't need any HTML.

[borisjake]

OK, so the function calls now but the triangle isn't moving.

<script src="http://code.jquery.com/jquery-1.4.4.js">
</script>
<script type="text/javascript">

    function movetri(){
        
        $("#triangles").animate({
                                left: "500",
                                             }, 500 );
        
        
    }
    

</script>

[Danzetti]

<script type="text/javascript">
function movetri(){
	$("#triangles").animate({
		marginLeft: "500px",
	}, 500 );
}

function()
{
	$('#hover').hover(function()
	{
		movetri();
	});
}
</script>
<a id="hover">Hover over me</a>