没有属性的Javascript OnMouseOver

Question

I'm trying to trigger a javascript onMouseOver event without having the onMouseOver attribute on everyone of my anchor attributes. In reality I want to display some other anchors when the user mouses over an element, but I can't even get an alert to work. I keep getting the error of:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of null

Which doesn't make sense to me because if I alert out the getElementById() I end up with a DIV element, which it should then get all the anchor tags inside that div element... Not sure what I am missing.

JSFiddle Link: http://jsfiddle.net/NfTtq/

Also note I am doing this Javascript not JQuery :S

Answer 1

You are trying to find the element before it exists, you can do this in jsfiddle by selecting onDomReady from the left instead of no wrap (head)

The other problem is onMouseOver , javascript is case sensitive so only onmouseover will work.

Here is updated jsfiddle:

http://jsfiddle.net/NfTtq/1/

Answer 2

You are executing script before html is loaded, so you need to put it into window.onload

http://jsfiddle.net/NfTtq/5/

window.onload= function()
    {

      var node = document.getElementById('navFloat').getElementsByTagName('a');
      node[0].onmouseover = function()
        {
            alert('yes');
            document.getElementById('homeDrop').style.display = 'block';            
        }
}

Answer 3

this code will work on all browsers.....

<p>
<a href="/">
<img alt="Ovdje uključiti " 
src="errorimages/normal.png" 
onmouseover="this.src='errorimages/hover.png'" 
onmousedown="this.src='errorimages/press.png'" 
onmouseup="this.src='errorimages/hover.png'" 
onmouseout="this.src='errorimages/normal.png'"
></a>
</p>

Answer 4

The onMouseDown event is written in small caps only, when invoked on the DOM. This worked for me:

var node = document.getElementById('navFloat').getElementsByTagName('a');
node[0].onmouseover= function()
{
    document.getElementById('homeDrop').style.display = 'block';
}