|
Posted by Gérard Talbot on August 26, 2005, 7:29 pm
Please log in for more thread options
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-developer/upgrade_2.html#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.html#propdef-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
| 
XML Sitemap