asp.net onMouseEnter to modify button's location

I'm developing a card game with Visual Studio and aspx.

In the page Head tag I added a Javascript function like this:

<script type="text/javascript">
    function cardMouseEnter()
    { document.forms[0].bCard1.style.top -= 5; }
</script>

A card is repre开发者_运维问答sented by a asp:ImageButton whose position is absolute and whose style property looks like this in the .aspx page:

<asp:ImageButton ID="bNCard1" runat="server" 
        style="position: absolute; top: 3px; left: 2px;  
        height: 98px; width: 73px;" ></asp:ImageButton>

In the load event of the code-behind file I added:

bCard1.Attributes.Add("onMouseOver", "cardMouseEnter()")

When I try to run the page and I place the mouse on the card I have a Javascript error:

Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined.

And when I inspect the code this is what I can see in a aspx(dynamic) generated page:

<input type="image" name="bCard1" id="bNorth1" onMouseOver="cardMouseEnter()" src="SomeCard.jpg"
       style="border-width:0px;top: 3px; left: 2px; position: absolute; 
       height: 106px; width: 73px; font-size:1.4em;" />

I feel this is weird, since the dynamically generated page has a "style" property. Any clue?

1. Use document.getElementById() to get the element in question and .getAttribute() to get the style and setAttribute() to set it
2. I would strongly suggest you look into jquery for anything javascript http://jquery.com/

Script:

function cardMouseEnter(id)
{ 
    document.getElementById(id).style.top -= 5; 
}

Code-behind:

bNCard1.Attributes.Add("onMouseOver", "cardMouseEnter('" + bNCard1.ClientID + "')");

Markup:

<asp:ImageButton ID="bNCard1" runat="server" 
        style="position: absolute; top: 3px; left: 2px;  
        height: 98px; width: 73px;" ></asp:ImageButton>

Just do this:

<input type="image" name="bCard1" id="bNorth1" onMouseOver="cardMouseEnter(this)" ...>

<asp:ImageButton ID="bNCard1" runat="server" onmouseover="cardMouseEnter(this)" ...> 

And you JS function:

function cardMouseEnter(ctrlToMove) { 
   ctrlToMove.style.top -= 5; 
}