Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2004
    Posts
    51
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with onmouseout - object has no properties error

    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:
    Code:
    <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:
    Code:
    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);
            
        }
    }

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,503
    Thanks
    3
    Thanked 500 Times in 487 Posts
    dont know but I retyped the line and it worked
    Code:
    function showLeftArrow() {
        document.getElementById('navleft').style.display = '';
    }
    
    function hideLeftArrow() {
        document.getElementById('navleft').style.display = 'none';
    }
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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()}
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •