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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question mouse event toElement, relatedTarget mozilla problem

    I have a image (bkgImage) with mapped links, an area link calling:

    onmouseover="Display('divPop');"
    onmouseout="Hide1(event,'divPop');"

    Display sets display for divPop to block, that's ok.

    Primarily divPop is display:none, and it has an image inside:

    <div style="left:150px; top:60px;" id="divPop" class="tip"><img src="img/image.gif" id="divPopImage" OnMouseOut="Hide2(event,'divPop');"></div>

    I have this script in the head:

    function Hide1(e,element) {
    //alert(e.relatedTarget.id);
    if ((e.toElement.id || e.relatedTarget.id) != 'divPopImage') {
    Hide(element);
    }
    }

    function Hide2(e,element) {
    //alert(e.relatedTarget.id);
    if ((e.toElement.id || e.relatedTarget.id) == 'bkgImage') {
    Hide(element);
    }
    }

    Hide function just sets display back to none, that's ok also.

    The original idea was to prevent bubbling (and because the area link and divPop are overlapping, it flickered because of mouseout/mouseover conflict), and also to not hide the divPop if you left the area link and entered divPop....but I complicated it a little.

    However, it now works as it should in IE, but not in Mozilla - divPop just stays open, when it should close, like in IE!

    If you uncommented the alerts in the functions you would see that the value of id goes thorugh - so mozilla "knows", where the mouse goes to... it just doesn't react afterwards

    I hope I described the situation clearly enough.

    Help?

    Thanks!

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 503 Times in 490 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcCkEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
     var zxcto=zxcEventTo(zxce);
     if (zxcto.set){ return false; }
     while (zxcto.parentNode){
      if (zxcto.set){ return false; }
      zxcto=zxcto.parentNode;
     }
     return zxceobj;
    }
    
    function zxcEventFrom(zxce){
     var zxcfrom;
     if (!zxce) var zxce=window.event;
     if (zxce.relatedTarget) zxcfrom=zxce.relatedTarget;
     else if (zxce.fromElement) zxcfrom=zxce.fromElement;
    }
    
    function zxcEventTo(zxce){
     var zxcto;
     if (!zxce) var zxce = window.event;
     if (zxce.relatedTarget) zxcto=zxce.relatedTarget;
     else if (zxce.toElement) zxcto=zxce.toElement;
     return zxcto
    }
    
    
    function zxcShowMseOut(zxce){
     document.getElementById('outer0').set=true;
     document.getElementById('outer1').set=true;
     document.Show.Show1.value='Mouse Out = '+zxcCkEventObj(zxce).set;
     if (!zxcCkEventObj(zxce)){
      return
     }
    document.Show.Show6.value=vic++;
    
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvent(zxc,zxcfun,zxcevt){
     if (zxc.addEvent){ return; }
     zxc.addEvent=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'addEvent');
    }
    
    function zxcInit(){
     var zxcobj=document.getElementById('outer0');
     zxcAddEvent(zxcobj,'zxcShowMseOut','mouseout')
     zxcobj=document.getElementById('outer1');
     zxcAddEvent(zxcobj,'zxcShowMseOut','mouseout')
    }
    
    //-->
    </script>
    
    </head>
    
    <body onload="zxcInit();" >
    
    <div id="outer0" style="position:absolute;top:100px;left:100px;width:300px;height:300px;background-color:silver;;border:solid black 1px;"
    
     >
    <img id="inner0" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200"
    style="position:absolute;top:20px;left:20px;border:solid black 1px;" >
    </div>
    
    <div id="outer1" style="position:absolute;top:100px;left:400px;width:300px;height:300px;background-color:silver;;border:solid black 1px;"
     >
    <img id="inner1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200"
    style="position:absolute;top:20px;left:20px;border:solid black 1px;" >
    </div>
    
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:450px;left:0px;" >
    <input size=20 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    </form>
    </body>
    </html>
    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/


  •  

    Posting Permissions

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