Problem with onmouseout - object has no properties error

[mat106]

Hi all, I've got an image gallery in which users can navigate between the next and previous image by clicking on the right or left half respectively of the current image. When the mouse is over the left half an arrow pointing to the left is shown on the image and when on the right an arrow to the right. It works fine if i use inline javascript but i'm trying to achieve the same effect unobtrusively and with an addEvent function. The onmouseover part works fine but from the function that fires on the onmouseout event i get the following error in Firefox and the arrow is not hidden:

document.getElementById("navLeft") has no properties
Source File: http://localhost:8080/.../viewpic.js
Line: 26

This is the relevant html:

<div class='center'>
<div id='navleft'><a href='previous_pic.jpg'><img src='left.png' alt='' width='34' height='34' border='0' /></a></div>
<img id='mainimage' src='London Zoo-April 2006/pics/img_03.jpg' alt='' usemap='#imagemap' />
<div id='navright'><a href='next_pic.jpg'><img src='right.png' alt='' width='34' height='34' border='0' /></a></div>
</div>
...
<map name='imagemap'>
<area id='left' shape='rect' coords='0,0,216.7,433' href='previous_pic.jpg' />
<area id='middle' shape='rect' coords='216.7,0,433.4,433' />
<area id='right' shape='rect' coords='433.4,0,650,433' href='next_pic.jpg' />
</map>

and this is the javascript:

window.onload = preparePage;

// Scott Andrew’s addEvent() function.
function addEvent(elm, evType, fn, useCapture) {
    if (elm.addEventListener) {
        elm.addEventListener(evType, fn, useCapture);
        return true;
    }
    else if (elm.attachEvent) {
        var r = elm.attachEvent('on' + evType, fn);
        return r;
    }
    else {
        elm['on' + evType] = fn;
    }
}

function showLeftArrow() {
    document.getElementById('navleft').style.display = 'block';
}

function hideLeftArrow() {
    document.getElementById('navLeft').style.display = 'none'; Line 26
}

function preparePage() {
    if(document.getElementById && document.getElementsByTagName){
        document.getElementById('picnav').style.display = 'none';
        
        //add event handlers to image areas.
        var middleSection = document.getElementById('middle');
        addEvent(middleSection, "dblclick", displayImgMetadata, false);
        
        var leftSectionOfImage = document.getElementById('left');
        addEvent(leftSectionOfImage, "mouseout", hideLeftArrow, false);
        addEvent(leftSectionOfImage, "mouseover", showLeftArrow, false);
        
    }
}

[vwphillips]

dont know but I retyped the line and it worked

function showLeftArrow() {
    document.getElementById('navleft').style.display = '';
}

function hideLeftArrow() {
    document.getElementById('navleft').style.display = 'none';
}

[Kor]

On the other hand the attachEvent/addEventListener play is an intricate one. I guess that the simple DOM 0 crosbrowser syntax is to be used in this case

object.onmouseover=function(){showLeftArrow()}
object.onmouseout=function(){hideLeftArrow()}