Low Bandwidth Rollovers: Popup Elements and BGcolor

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.

Step by Step

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:

<SPAN STYLE="background-color:lightgrey">Back me up!</SPAN>
gives us:
Back me up!
<SPAN STYLE="position:relative; background-color:lightgrey">Back me up!</SPAN>
displays as:
Back me up!
and
<SPAN STYLE="position:absolute; background-color:lightgrey">Back me up!</SPAN>
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:
.
.
.
<script language="JavaScript1.2">
    if (IE4) { 
        document.all.elMenu.style.left = 50;
        document.all.elDetails1.style.width = 100;
        document.all.elDetails1.style.textAlign = "center";  
        document.all.elDetails2.style.width = 200; 
        document.all.elDetails2.style.textAlign = "center";  
        document.all.elDetails3.style.width = 100; 
        document.all.elDetails3.style.textAlign = "center";  
        document.all.elDetails4.style.width = 100; 
        document.all.elDetails4.style.textAlign = "center";  
        document.all.elDetails5.style.width = 100; 
        document.all.elDetails5.style.textAlign = "center";  
        document.all.elDetails6.style.width = 150; 
        document.all.elDetails6.style.textAlign = "center";  
        document.all.elDetails7.style.width = 200; 
        document.all.elDetails7.style.textAlign = "center";  
    }

</script>
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
 
All Rights Reserved. Legal Notices.

Created: 08/06/97

Revised: 04/13/98
URL: https://www.webreference.com/dhtml/column2/double.html