DIVs don't appear in FireFox - any ideas?

[Gregor]

I am trying to use an image map with a mouseover function to show
various DIV tags. I am not an expert, but what I've come up with works
in IE but not in FireFox. Any insight would be greatly appreciated.

Below is the js and CSS code

<SCRIPT TYPE="text/javascript">
<!--
var layerRef="",styleSwitch="",curMenu="";

if (document.layers) {
layerRef="document.layers";
styleSwitch="";
} else if (document.all) {
layerRef="document.all";
styleSwitch=".style";
}

function showMenu(menuName) {
if (document.layers || document.all) {
if (curMenu!="") {
eval(layerRef+'["'+curMenu+'"]'+styleSwitch+'.visibility="hidden"');
}

eval(layerRef+'["'+menuName+'"]'+styleSwitch+'.visibility="visible"');
curMenu = menuName;
} else { return };
}

function menuOn(menuName){
if (window.delay) clearTimeout(delay);
}

function hideMenu(menuName) {
if (document.layers || document.all) {
delay =
setTimeout(layerRef+"['"+menuName+"']"+styleSwitch+".visibility='hidden';",400);

//eval(layerRef+'["'+menuName+'"]'+styleSwitch+'.visibility="hidden"');
} else { return };
}
// -->
</script>
<style type="text/css">
<!--
..bluebold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #0070C8}
..black { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
..blacksm { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 8pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
..blackbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #000000}
..yellowsmbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 7.5pt; font-style: normal; line-height: 10pt; font-weight:
bold; text-transform: none; color: #FFFF00}

div#ComponentNav {position:absolute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 100}
div#DigCoaxNav {position:absolute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 99}
div#mmNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 98}
div#M1Nav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 97}
div#HDMINav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 96}
div#DVINav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 95}
div#RCAaudNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 94}
div#RCAvidNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 93}
div#SvidNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 92}
div#TosNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 91}
div#FireNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 90}
div#VGAinNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 89}
div#VGAoutNav {position:absolute; width:620px; height:140px; left:13px;
top: 35px; background-color: #FFFFFF; layer-background-color: #FFFFFF;
border: 1px none #000000; visibility: hidden; z-index: 88}
-->
</style>

*********************************************
Here's the code for the image and map

<td><IMG NAME="projector_config_01" SRC="images/projector2.jpg"
WIDTH=718 HEIGHT=271 BORDER=0 ALT="" USEMAP="#projector2_Map"
z-index="1">
<MAP NAME="projector2_Map">
<AREA SHAPE="rect" ALT="" COORDS="468,106,550,132"
ONMOUSEOVER="showMenu('ComponentNav','','show')"
onMouseOut="hideMenu('ComponentNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="365,106,419,130"
ONMOUSEOVER="showMenu('RCAaudNav','','show')"
onMouseOut="hideMenu('RCAaudNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="579,63,650,90"
ONMOUSEOVER="showMenu('DVINav','','show')"
onMouseOut="hideMenu('DVINav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="487,63,540,89"
ONMOUSEOVER="showMenu('VGAinNav','','show')"
onMouseOut="hideMenu('VGAinNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="430,63,460,89"
ONMOUSEOVER="showMenu('SvidNav','','show')"
onMouseOut="hideMenu('SvidNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="392,63,416,89"
ONMOUSEOVER="showMenu('RCAvidNav','','show')"
onMouseOut="hideMenu('RCAvidNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="356,63,376,89"
ONMOUSEOVER="showMenu('35mmNav','','show')"
onMouseOut="hideMenu('mmNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="272,63,323,90"
ONMOUSEOVER="showMenu('VGAoutNav','','show')"
onMouseOut="hideMenu('VGAoutNav','','hide')">
<AREA SHAPE="rect" ALT="" COORDS="65,63,164,90" target="_blank"
ONMOUSEOVER="showMenu('M1Nav','','show')"
onMouseOut="hideMenu('M1Nav','','hide')">

</MAP>
</td>
************************************************** ****************
And finally the DIVs

<div id="ComponentNav">
text9text9text9text9text9text9text9
</div>

<div id="mmNav">
text8text8text8text8text8text8text8
</div>

<div id="M1Nav">
text7text7 text7 text7 text7 text7
</div>

<div id="RCAaudNav">
text6text6text6text6text6text6text6
</div>

<div id="RCAvidNav">
text5text5text5text5text5text5text5
</div>

<div id="SvidNav">
text4text4text4text4text4text4text4
</div>

<div id="DVINav">
Text3Text3Text3Text3Text3Text3Text3
</div>

<div id="VGAinNav">
Text2Text2Text2Text2Text2Text2Text2
</div>

<div id="VGAoutNav">
TextTextTextTextTextTextTextText
</div>

[David Dorward]

Gregor wrote:

if (document.layers) {
Netscape 4.x specific.
} else if (document.all) {

Internet Explorer specific.

See http://www.mozilla.org/docs/web-deve...ade_2.html#dom
--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[Gérard Talbot]

Gregor wrote :

I am trying to use an image map with a mouseover function to show
various DIV tags. I am not an expert, but what I've come up with works
in IE but not in FireFox. Any insight would be greatly appreciated.

Below is the js and CSS code

<SCRIPT TYPE="text/javascript">
<!--
var layerRef="",styleSwitch="",curMenu="";

if (document.layers) {
layerRef="document.layers";
styleSwitch="";
} else if (document.all) {
layerRef="document.all";
styleSwitch=".style";
}

If your goal is to support MSIE 5.x, MSIE 6, NS 6.x, NS 7.x, Firefox
1.x, Konqueror 3.x, Opera 7.x, Opera 8.x, Safari 1.x, Icab 3.x, then you
do not need any of the above code (except the curMenu variable). You
only need to resort, to use
document.getElementById.

Using Web Standards in Your Web Pages
http://www.mozilla.org/docs/web-deve...tml#dom_access

There is no good reason anymore to try to support NS 4.x and MSIE 4.x:
these browsers represent less than 1% of world wide usage and they do
not support well absolute positioning. So, here, considering what your
scripts do, it's a clear call: you don't need to use document.all
neither document.layers at all.

function showMenu(menuName) {
if (document.layers || document.all) {
if (curMenu!="") {
eval(layerRef+'["'+curMenu+'"]'+styleSwitch+'.visibility="hidden"');
}

eval(layerRef+'["'+menuName+'"]'+styleSwitch+'.visibility="visible"');
curMenu = menuName;
} else { return };
}

Once converted to W3C web standards code, that function would go like this:

function showMenu(menuName)
if(curMenu != "")
{
document.getElementById(curMenu).style.visibility = "hidden";
};
document.getElementById(menuName).style.visibility = "visible";
curMenu = menuName;
}
function menuOn(menuName){
if (window.delay) clearTimeout(delay);
}

function hideMenu(menuName) {
if (document.layers || document.all) {
delay =
setTimeout(layerRef+"['"+menuName+"']"+styleSwitch+".visibility='hidden';",400);

//eval(layerRef+'["'+menuName+'"]'+styleSwitch+'.visibility="hidden"');
} else { return };
}
// -->
</script>
<style type="text/css">
<!--
.bluebold { font-family: Arial, Helvetica, sans-serif, Verdana;
sans-serif should be the last item.
http://www.w3.org/TR/CSS21/fonts.htm...ef-font-family
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #0070C8}
Regarding font-size:

W3C Quality Assurance tip for webmaster:
Care With Font Size, Recommended Practices
"Do not specify the font-size in pt, or other absolute length units.
They render inconsistently across platforms and can't be resized by the
User Agent (e.g browser).
Use relative length units such as percent or (better) em"

.black { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
.blacksm { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 8pt; font-style: normal; line-height: 12pt; font-weight:
normal; text-transform: none; color: #000000}
.blackbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 9pt; font-style: normal; line-height: 12pt; font-weight:
bold; text-transform: none; color: #000000}
.yellowsmbold { font-family: Arial, Helvetica, sans-serif, Verdana;
font-size: 7.5pt; font-style: normal; line-height: 10pt; font-weight:
bold; text-transform: none; color: #FFFF00}

The initial value of text-transform is none; so unless you're modifying
that value, there is no need to declare text-transform: none.
div#ComponentNav {position:absolute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 100}
layer-background-color is not W3C CSS 2 compliant; it is only understood
by NS 4.
div#DigCoaxNav {position:absolute; width:620px; height:140px;
left:13px; top: 35px; background-color: #FFFFFF;
layer-background-color: #FFFFFF; border: 1px none #000000; visibility:
hidden; z-index: 99}
[snipped]
Here's the code for the image and map

<td><IMG NAME="projector_config_01" SRC="images/projector2.jpg"
WIDTH=718 HEIGHT=271 BORDER=0 ALT="" USEMAP="#projector2_Map"
z-index="1">
<MAP NAME="projector2_Map">
<AREA SHAPE="rect" ALT="" COORDS="468,106,550,132"
ONMOUSEOVER="showMenu('ComponentNav','','show')"
onMouseOut="hideMenu('ComponentNav','','hide')">

Your original code for showMenu and hideMenu had only 1 parameter. You
only need 1 parameter too.

Gérard
--
remove blah to email me

[Gregor]

Gerard,

Thanks for the assistance. I understand your points and based on W3C
standards it all makes sense. That said, I am still having issues. I
tried using your code

function showMenu(menuName)
if(curMenu != "")
{
document.getElementById(curMenu).style.visibility = "hidden";
};
document.getElementById(menuName).style.visibility = "visible";
curMenu = menuName;

and the hideMenu version of it, but no luck. I've adjusted the
onmouseover and onmouseout to hidden and visible to ensure they are
consistent with the JS. I am still getting JS errors. I am not
including more of the code I modified b/c I really want to overcome
this on my own and learn, but I haven't learned yet :)

Can you perhaps point me in a general direction?

[Gérard Talbot]

Gregor wrote :

Gerard,

Thanks for the assistance. I understand your points and based on W3C
standards it all makes sense. That said, I am still having issues. I
tried using your code

function showMenu(menuName)
if(curMenu != "")
{
document.getElementById(curMenu).style.visibility = "hidden";
};
document.getElementById(menuName).style.visibility = "visible";
curMenu = menuName;

and the hideMenu version of it, but no luck. I've adjusted the
onmouseover and onmouseout to hidden and visible to ensure they are
consistent with the JS. I am still getting JS errors.
I do not see the errors over here, you know. No clue.

I am not including more of the code I modified b/c I really want to overcome
this on my own and learn, but I haven't learned yet :)
Ok. Well, this is an excellent attitude... which is unfortunately not
dominant in web programming newsgroups.

Can you perhaps point me in a general direction?

Gregor, best is to first provide an URL where your code, all of it, is.
Also, tell me what errors you see in the js console.
The code I gave is good: that I'm sure of.

Gérard
--
remove blah to email me