Mouse detection can be important factor in creating movement onscreen, and it may come to no surprise to you that it is browser-dependent. For Netscape, we use e.pageX for the X-coordinate and e.pageY for the Y-coordinate, where e is the event storing variable). In IE, we use window.event.x for the X-coordinate and window.event.y for the Y-coordinate. Here's a function that includes these references:

function returnMouseXCoord(e){
      mouseX = navigator.appName=="Netscape" ? e.pageX : event.x;
      return mouseX;
}

Layer coordinates

It's also useful to be able to return the position of the corners of a layer (we'll examine one particular use of this later). parseInt(accessCSS(layerID).top) and parseInt(accessCSS(layerID).left) retrieve the top and left edge of a layer. That's easy enough, but how do we get the right and bottom of a layer? There's no right and bottom CSS style properties. We can however retrieve the width and height of a layer and use these to find the layer's right and bottom. Let's look at the following diagram of a layer:

Following this concept, we can get the width and height of a layer and add it to the left and top pixel values, respectively. (Pretty clever, eh?) Left + width would represent the right edge of the layer and top + height would represent the bottom edge of the layer. But don't relax just yet; finding the height and width of a layer is no pcnic. We could just use parseInt(accessCSS(layerID).width), but this only works if we define the layer's width specifically. Instead, using browser-dependant technology, we can find the layer's width without specifically setting it.

Big and Tall Shop

In NN 4, we use: document.layers[layerID].clip.width and document.layers[layerID].clip.height.

In IE 4, we use: document.all[layerID].offsetWidth and document.all[layerID].offsetHeight. Notice the ommission of the ".style" because offsetWidth and offsetHeight are not CSS styles. If you use ".style", you'll mess up your script.

Just as IE 4 uses offsetWidth and offsetHeight (without the ".style"), IE 5 and NN 6 does the same thing (except you access the layer differently). In IE 5 and NS 6, you use: document.getElementById(layerID).offsetWidth and document.getElementById(layerID).offsetHeight.

Because of these browser inconsistancies, lets create a generic function to get a layer's width and height to make it easier for us later on:

function getLayerWidth(layerID){
      if(document.getElementById){
            return parseInt(document.getElementById(layerID).offsetWidth);
      }else if(document.all){
            return parseInt(document.all[layerID].offsetWidth);
      }else if(document.layers){
            return parseInt(document.layers[layerID].clip.width);
      }
}

function getLayerHeight(layerID){
      if(document.getElementById){
            return parseInt(document.getElementById(layerID).offsetHeight);
      }else if(document.all){
            return parseInt(document.all[layerID].offsetHeight);
      }else if(document.layers){
            return parseInt(document.layers[layerID].clip.height);
      }
}

Before going on to the drag'n drop on target script, there's yet another issue we've got to overcome.

Next -->