Javascript OnMouseOver without attribute

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

score 3 · Accepted Answer · answered Nov 17 '11 at 16:50

3

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/

answered Nov 17 '11 at 16:50

Esailija

138,174
23
272
326

Ohhhhh that makes sense, reading it from top to bottom ok ok. Is there a javascript way to tell if the document is ready without having something in the body? document.ready() or something? – Howdy_McGee Nov 17 '11 at 16:52
just run your element dependant javascript right before
tag.. this way the code is only found after all elements in the page and they exist when the code is executed. `$(document).ready(fn)` is jQuery, there is no cross browser equivalent in plain javascript.
– Esailija Nov 17 '11 at 16:53
putting it in the footer worked. :D Thanks will remember this in future! – Howdy_McGee Nov 17 '11 at 16:57
Yes, just before `
` tag you put `` and inside the script tag you put the code and it should work.
– Esailija Nov 17 '11 at 17:02

score 1 · Answer 2 · answered Nov 17 '11 at 16:57

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';            
        }
}

score 0 · Answer 3 · answered Feb 06 '15 at 09:32

0

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>

answered Feb 06 '15 at 09:32

davorMar

1

Welcome to Stack Overflow! Could you please [edit] in an explanation of why this code answers the question? – Scimonster Feb 06 '15 at 10:41

score 0 · Answer 4 · answered Nov 17 '11 at 16:56

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';
}

Javascript OnMouseOver without attribute

4 Answers4