event capture problem

by Jim Coffield <coffield(at)cet.edu>

 Date:  Fri, 26 May 2000 10:02:15 -0500
 To:  hwg-languages(at)hwg.org
  todo: View Thread, Original
Hi,

I have a programming problem that I hope someone can help me with.  I am
working on some educational software (a middle school curriculum
supplement).  The material is in HTML and will be distributed on a CD-ROM.
I have a fair amount of javascript and style sheets thorughout the pages.
Here is an outline of the problem.

I have included balloon help in some of the pages. The balloons are in
individual layers and made visible by a mouseover event. In some cases, the
hotspots for the help are not active links or cover an area that contains
several onclick links.  For this reason I am not using a standard image map
to activate the help messages.  Below is the code I am using to define the
hotspots:

function myMap(e)
{
  if (document.layers && e.pageX>pageXOffset)
  {
    if (e.pageX>=1 && e.pageX<=257 && e.pageY>=241 && e.pageY<=434)
    {
      ton('14',0,370);
    }
    else if ((e.pageX>=542 && e.pageX<=676 && e.pageY>=176 && e.pageY<=244)
|| (e.pageX>=505 && e.pageX<=676 && e.pageY>=244 && e.pageY<=282))
    {
      ton('15',0,50);
    }
    else if (e.pageX>=377 && e.pageX<=499 && e.pageY>=188 && e.pageY<=251)
    {
      ton('16',0,120);
    }
    else if (e.pageX>=4 && e.pageX<=187 && e.pageY>=138 && e.pageY<=196)
    {
      ton('17',0,50);
    }
    else if (e.pageX>=231 && e.pageX<=362 && e.pageY>=173 && e.pageY<=237)
    {
      ton('18',0,100);
    }
     else if (e.pageX>=281 && e.pageX<=460 && e.pageY>=298 && e.pageY<=418)
    {
      ton('19',0,220);
    }
    else if (e.pageX>=472 && e.pageX<=673 && e.pageY>=303 && e.pageY<=457)
    {
      ton('20',0,220);
    }
    else if (e.pageX<0)
    {
      //
    }
    else
    {
      toff();
    }
  }
  else if (!document.layers)
  {
    var yoff=document.body.scrollTop
    var xoff=document.body.scrollLeft
    if (event.x>=1-xoff && event.x<=257-xoff && event.y>=241-yoff &&
event.y<=434-yoff)
    {
      ton('14',0,370);
    }
    else if ((event.x>=542-xoff && event.x<=676-xoff && event.y>=176-yoff
&& event.y<=244-yoff) || (event.x>=505-xoff && event.x<=676-xoff &&
event.y>=244-yoff && event.y<=282-yoff))
    {
      ton('15',0,50);
    }
    else if (event.x>=377-xoff && event.x<=499-xoff && event.y>=188-yoff &&
event.y<=251-yoff)
    {
      ton('16',0,120);
    }
    else if (event.x>=4-xoff && event.x<=187-xoff && event.y>=138-yoff &&
event.y<=196-yoff)
    {
      ton('17',0,50);
    }
    else if (event.x>=231-xoff && event.x<=362-xoff && event.y>=173-yoff &&
event.y<=237-yoff)
    {
      ton('18',0,100);
    }
     else if (event.x>=281-xoff && event.x<=460-xoff && event.y>=298-yoff
&& event.y<=418-yoff)
    {
      ton('19',0,220);
    }
    else if (event.x>=472-xoff && event.x<=673-xoff && event.y>=303-yoff &&
event.y<=457-yoff)
    {
      ton('20',0,220);
    }
    else
    {
      toff();
    }
  }
}

function myInit()
{
  if (document.layers)
  {
    document.captureEvents(Event.MOUSEMOVE);
    document.thelp14.captureEvents(Event.MOUSEUP);
    document.thelp14.onmouseup=new
Function("nloc('../../VisitorCenter/vclobby.html'); return true;");
    document.thelp15.captureEvents(Event.MOUSEUP);
    document.thelp15.onmouseup=new Function("nloc('../Office/Office.html');
return true;");
    document.thelp16.captureEvents(Event.MOUSEUP);
    document.thelp16.onmouseup=new
Function("nloc('../Library/Library.html'); return true;");
    document.thelp17.captureEvents(Event.MOUSEUP);
    document.thelp17.onmouseup=new
Function("nloc('../ControlCenter/controlcenter.html'); return true;");
    document.thelp18.captureEvents(Event.MOUSEUP);
    document.thelp18.onmouseup=new
Function("nloc('../handsonlab/HandsOnLab.html'); return true;");
    document.thelp19.captureEvents(Event.MOUSEUP);
    document.thelp19.onmouseup=new
Function("nloc('../Theater/AuditoriumLobby.html'); return true;");
    document.thelp20.captureEvents(Event.MOUSEUP);
    document.thelp20.onmouseup=new
Function("nloc('../../Snackshop/SnackShopInterior.html'); return true;");
  }
  else
  {
    document.all.thelp14.onclick=new
Function("nloc('../../VisitorCenter/vclobby.html'); return true;");
    document.all.thelp15.onclick=new
Function("nloc('../Office/Office.html'); return true;");
    document.all.thelp16.onclick=new
Function("nloc('../Library/Library.html'); return true;");
    document.all.thelp17.onclick=new
Function("nloc('../ControlCenter/controlcenter.html'); return true;");
    document.all.thelp18.onclick=new
Function("nloc('../handsonlab/HandsOnLab.html'); return true;");
    document.all.thelp19.onclick=new
Function("nloc('../Theater/AuditoriumLobby.html'); return true;");
    document.all.thelp20.onclick=new
Function("nloc('../../Snackshop/SnackShopInterior.html'); return true;");
  }
  document.onmousemove=myMap;
}

<body topmargin="0" leftmargin="0" align="left" bgcolor="#000000"
text="#FFFFFF" onunload="window.focus();" onload="myInit();">


The functions ton() and toff() make the various help balloons visible and
hidden. This code seems to work fine.  The problem occurs once the browser
(Netscape on a Macintosh) has loaded a page with this code.  Any subsequent
page that has both form elements and image maps does not function properly.
On one particular page I have radio buttons and a mapped image. Once I
click on a radio button, the browser does not seem to recognize the image
map until I have clicked somewhere else on the page.  The image map then
works fine until I click a radio button again. This is not a fatal error
but it is rather annoying since the students will be alternately clicking
the radio buttons and the image map quite a bit on this page.  This page
works fine when loaded in a new browser window that has not been exposed to
the balloon help code.

If I comment out the 'document.onmousemove=myMap' statement, the problem
goes away (and of course then my balloons don't work).  I have tried
putting 'document.releaseEvents(Event.MOUSEMOVE)' in an onunload event in
the page with the balloon help and in an onload event in the page with the
radio buttons.  Neither of these two attempts worked.  I does seem to me
that the MOUSEMOVE event is somehow not being completely released when the
new page is loaded (Actually there is a page between the balloon help page
and the radio button page that has no DHTML so this appears to be a
permanent corruption of the browser window or frame being used).

Does anyone have any idea how to solve this problem? The problem only
occurrs in Netscape on a Macintosh and the CD must be cross-platform and
cross-browser.

Thanks

Jim

James E. Coffield, Ph.D.
Research Associate
Center for Educational Technologies/
NASA Classroom of the Future
Wheeling Jesuit University
316 Washington Avenue
Wheeling, WV  26003
Phone (304) 243-2469      Fax: 304-243-2497
WWW address:  http://www.cet.edu/
email: coffield(at)cet.edu

HWG: hwg-languages mailing list archives, maintained by Webmasters @ IWA