[js] menu werkt niet in mozilla

[Verwijderd]

Ik was gister heel enthousiast aan het HTML'en om de layout van me nieuwe site klaar te bakken. Daar wou ik net zo'n dropdown menu bij als je hier op T.net hebt. Ik alles netjes maken, werkte na wat geklooi perfect. Alleen als ik in mozilla me test pagina bekijk, komt er als ik over de "HTML HOTSPOTS" hover helemaal niets. Geen error, geen foute menu's gewoon helemaal niets. Wat is er mis

Hieronder vind je het scriptje wat ik voor mijn menu's gebruik:

code:

// check browser version
NS4 = (document.layers) ? 1 : 0;

function layer_enter (id)
{
    on_layer_id = id;
}
function layer_exit (id)
{
    on_layer_id = - 1;
    setTimeout ('hide('+ id +')', delay/5);
}
function menu_enter (id)
{
    if (buff_id >= 0)
        hide (buff_id);

    show (id);
    active_layer_id = id;
}
function menu_exit (id)
{
    setTimeout ('hide('+ id +')', delay);
    buff_id = active_layer_id;
    active_layer_id = -1;
}
function show (id)
{
    if (!NS4)
        document.all['Menu' + id].style.visibility = "visible";
    else
        document.layers[id].visibility = "visible";
}
function hide (id)
{
    if (active_layer_id != id && on_layer_id != id)
    {
        if (!NS4)
            document.all['Menu' + id].style.visibility = "hidden";
        else
            document.layers[id].visibility = "hide";
    }
}

function generate_layers ()
{

    for (i = 0; i < menu_content.length; i++)
    {
        elements = menu_content[i].split (/\s*\|\s*/);
        layer_body = '';
        menu_width = elements[0]*1;
        
        for (j = 1; j < elements.length; j++)
        {
            layer_body += elements[j];  
            if ((NS4 && j < elements.length - 1) || (!NS4 && j < elements.length - 1))
                layer_body += '      [img]break.gif[/img]<br>';
        }

        if (!NS4)
            layer_header = '<div id=Menu' + i +
                           ' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
                           ' style="visibility: hidden; position: absolute; left: ' + (left_corner_x) +
                           '; top: ' + left_corner_y + ';">';
        else
            layer_header = '<layer id=' + i +
                           ' onMouseOver="layer_enter (' + i + ');" onMouseOut = "layer_exit (' + i + ');"' +
                           ' visibility=hide left=' + (left_corner_x) +
                           ' top = ' + left_corner_y + '>';

        layer_header += '' + '<table cellSpacing=0 cellPadding=0 width=' + menu_width + ' border=1 bordercolor=#000000 style="border-collapse: collapse"><tr><td width=' + menu_width + ' background=back4.jpg align=center>';


        layer_footer = '</td></tr></table>';
        if (!NS4)
            layer_footer += '</div>';
        else
            layer_footer += '</layer>';
        document.writeln (layer_header + layer_body + layer_footer);
        
        left_corner_x = left_corner_x*1 + 75*1;

    }
}
generate_layers ();

Op de HTML pagina zelf staat dit boven de pagina in het script:

code:

<script language="JavaScript" type="text/javascript"><!--

var left_corner_x  = 285; // x-coordinate of top left corner of dropdown menu 
var left_corner_y  = 43; // y-coordinate of top left corner of dropdown menu 
var back_color     = '#2A3962'; // the background color of dropdown menu 
var border_color   = '#4A739C'; // the color of dropdown menu border
var border_size    = '2'; // the width of dropdown menu border
var menu_width     = '135'; // the width of dropdown menu 
//


// Verander deze variable niet!
var delay           = 500;
var active_layer_id = -1; 
var on_layer_id     = -1; 
var buff_id         = -1; 
// ----------------------------



// Attention! You have to change the first number in Array line to change the width of the particular column! 
// menu content; the dropdown menus themselfs between '' and items of every dropdown menu are diveded by |; 
// 
menu_content  = new Array ( '139 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ',
'135 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ',
'135 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ',
'135 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ',
'135 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ',
'135 | blaa | baaa | Baaaa | asdfasdf BOE! | BWAAA | OCNTENT | leuk? | jaaaH! ');

//--></script>

Dan vraag ik op de pagina het script zo op:

code:

<script language="JavaScript" type="text/javascript" src="js/menu.js"></script>

Op de plekken waar de menu's moeten komen heb ik het zo gedaan:

code:

[img]"menu.jpg"[/img]<map name=Map>
<area shape=POLY target=_top coords="330, 26, 379, 25, 375, 36, 332, 38" onMouseOver="menu_enter (0);" onMouseOut="menu_exit (0);" href="1">
<area shape=POLY target=_top coords="388, 27, 447, 26, 446, 37, 390, 39" onMouseOver="menu_enter (1);" onMouseOut="menu_exit (1);" href="2">
<area shape=POLY target=_top coords="459, 27, 518, 26, 517, 37, 461, 39" onMouseOver="menu_enter (2);" onMouseOut="menu_exit (2);" href="3">
<area shape=POLY target=_top coords="534, 27, 593, 26, 592, 37, 536, 39" onMouseOver="menu_enter (3);" onMouseOut="menu_exit (3);" href="4">
<area shape=POLY target=_top coords="613, 26, 691, 26, 691, 37, 615, 38" onMouseOver="menu_enter (4);" onMouseOut="menu_exit (4);" href="5">
<area shape=POLY target=_top coords="704, 28, 763, 27, 762, 38, 706, 40" onMouseOver="menu_enter (5);" onMouseOut="menu_exit (5);" href="6">
</map>

Anyway, ik heb dus geen id waarom mozilla het script niet lieV vind

[Verwijderd]

Het probleem zit 'm denk ik in je omgang met layers. Moz prefereert getElementById. Zie hier voor een betere crossbrowser objecten-API (onder DHTML Theory / micro-API).

[alienfruit]

je moet zelf alleen de browsercheck doen

code:

function showObject( obj ) {
    if ( browsercheck.w3c ) {
      obj.style.visibility = "visible";
    } else if ( browsercheck.ie ) {
      obj.visibility = "visible";
    } else if ( browsercheck.ns4 ) {
      obj.visibility = "show";
    }
}

[Guillome]

Klopt niet hoor.
Voor IE is het ook obj.style.visibility.
Of beter is misschien nog wel de display:none optie