| home / experts / dhtml / column2 |
 
|
|
By creating CSS elements containing text and controlling their
visibility, we can have an unlimited number of popup information
layers that react to a mouse event.
Pass your mouse over yet another menu below:
Here we have defined 7 CSS elements with text descriptions of the menu selections. The shading and the borders have been included to give an image effect.
Our popup elements have the following declarations:
#elDetails1 {
left: 0;
position: absolute;
padding-left: 10;
padding-right: 10;
background-color: lightgrey;
layer-background-color: lightgrey;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
visibility: hidden;
border: thin black solid
}
#elDetails2 {
left: 90;
position: absolute;
padding-left: 10;
padding-right: 10;
background-color: lightgrey;
layer-background-color: lightgrey;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
visibility: hidden;
border: thin black solid
}
.
.
.
#elDetails7 {
left: 340;
position: absolute;
padding-left: 10;
padding-right: 10;
background-color: lightgrey;
layer-background-color: lightgrey;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
visibility: hidden;
border: thin black solid
}
Notice that 9 of the 10 declarations in each rule are exactly the same. Only the property differs. CSS allows us to group declarations into classes. That is, selectors that exist independently of HTML tags but can be assigned to any tag using the CLASS= attribute. In our STYLE rule, the selector is given a unique name, that begins with a period.
Our stylesheet should therefore be modified to read:
#elDetails2 { left: 90; }
#elDetails3 { left: 150 }
#elDetails4 { left: 200 }
#elDetails5 { left: 260 }
#elDetails6 { left: 305 }
#elDetails7 { left: 340 }
.details {
position: absolute; /* group all common */
padding-left: 10; /* declarations */
padding-right: 10; /* into one */
background-color: lightgrey; /* CLASS rule */
layer-background-color: lightgrey;
font-family: sans-serif;
font-size: 9pt;
font-weight: bold;
visibility: hidden;
border: thin black solid
}
We have completely omitted the definition of #elDetails1 because its only property is left and its value is 0 (zero), the default.
Our usual background and menu-image elements have to be pushed lower in the containment to allow for the popup elements:
#elMenuBG {
position: absolute;
top: 25;
left: 0;
clip: rect(0 468 18 0);
background-color: #DDDDDD;
layer-background-color: #DDDDDD;
visibility: hidden;
}
#elMenuIMG {
position: absolute;
top: 25;
left: 0;
}
These elements are placed in our page as:
And our long-suffering mapOver function is now made to read:
function mapOver(which,on) {
if (!ver4) {return};
if (IE4) {
whichEl = document.all.elMenuBG.style;
detailEl = eval("document.all.elDetails" + which + ".style")
}
else {
whichEl = document.elMenu.document.elMenuBG;
detailEl = eval("document.elMenu.document.elDetails" + which)
}
if (!on) {
whichEl.visibility = "hidden";
detailEl.visibility = "hidden";
return;
}
clLeft = arPopups[which][0];
clRight = arPopups[which][1];
if (NS4) {
whichEl.clip.left = clLeft;
whichEl.clip.right = clRight;
}
else {
whichEl.clip = "rect(" + clTop + " " + clRight + " " + clBot + " " + clLeft + ")";
}
whichEl.visibility = "visible";
detailEl.visibility = "visible";
}
Don't forget to add the script for the array and to define the <MAP> as before.
MSIE 4 Note
Explorer renders the background property differently on absolutely positioned elements than it does on relatively positioned or simple elements. For example:
gives us:
Back me up!
displays as:
Back me up!
and
displays as: (difference viewable on IE4 only)
Back me up!
That is, in the first two cases the width reflects the contents, and in the third, the margins.
To work around this, declare widths and text alignment in a MSIE-only SCRIPT at the very end of your page, just before </BODY>. To wit:
This example was just skimmed over. Much of the code can be shortened. Careful perusal of the code should make our additions self-explanatory. Backward compatibility we leave to you, using the techniques we have discussed over the last two columns.
Produced by Peter Belesis and
Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers
All Rights Reserved. Legal Notices.
Created: 08/06/97
Revised: 04/13/98
URL: http://www.webreference.com/dhtml/column2/double.html
