faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

68 of 77 people (88%) answered Yes
Recently 8 of 10 people (80%) answered Yes

Entry

How can I use layers with NS and IE to display information when the mouse is over a text

Apr 4th, 2008 20:02
ha mo, Iván Rivera, Matty Parackal,


First of all, let's settle the question of the event handler...
NS4 is somewhat limited: you cannot assign an onMouseOver handler to an
arbitrary text. You can, however, enclose your text in an anchor tag,
like this: 
<a href="#" onMouseOver="displayInfo()" onMouseOut="hideInfo()">Test</a>
(Note: if you want this anchor to look like normal text, all you have to
do is set a style attribute for it, with some appropiate CSS values like:
style="text-decoration:none;color:black"
That will work cross-browser.)
The event handler issue resolved, it's time to move onto the main
problem: layer display. That will be carried out with two functions: one
for showing a layer, which we will call displayInfo(), and another one
for hiding it, e.g. hideInfo().
First, define your layer as a DIV in the body of your HTML page:
<DIV ID="myLayer" STYLE="position:absolute;
			top:200;
			left:200;
			height:100;
			width:100;
			clip:rect(0 100 100 0);
			visibility:hidden">
	<!-- The contents for your layer go here -->
</DIV>
That would define a 100x100 pixel layer, with its top left corner in
position (200,200) (measured from the upper left corner of your
browser's display area), with a clipping rectangle that allows for all
the surface to show (that is what clip:rect is good for; the four
arguments are distances from the four borders of a fictitious
rectangular window above your layer, beginning with top and following
clockwise: right, bottom and left borders).
Your layer is initially hidden, as per the CSS definition. The functions
called in the two handlers of the controlling anchor need to change
that, and to do it in a cross-browser fashion. The simplest functions
that work are the following:
function displayInfo(layerID) {
  if (document.getElementById) {  // object detection for IE5 and NS6
    var layerObj=document.getElementById(layerID);
    layerObj.style.visibility='visible';
  } else if (document.all) {  // object detection for IE4
    document.all[layerID].style.visibility='visible';
  } else if (document.layers) {  // object detection for NS4
    document.layers[layerID].visibility='show';
  } // no else branch, but some action might be in order for other
    // browsers...
}
function hideInfo(layerID) {
  if (document.getElementById) {  // object detection for IE5 and NS6
    var layerObj=document.getElementById(layerID);
    layerObj.style.visibility='hidden';
  } else if (document.all) {  // object detection for IE4
    document.all[layerID].style.visibility='hidden';
  } else if (document.layers) {  // object detection for NS4
    document.layers[layerID].visibility='hide';
  } 
}
Put these functions in a script located conveniently (into the HEAD
section of the page, for instance), and call them from appropiate event
handlers coded in anchor tags: that way, the whole thing will work the
same for all browsers without much extra coding. An example anchor:
<a href="#" onMouseOver="showInfo('myLayer')"
onMouseOut="hideInfo('myLayer')>Mouse over me to see...</a>
Of course, you are free to define as many layers as you see fit (with
different IDs!) and calling them from different anchors, and even using
other events, like onClick. Hope this helps...
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com