[jscript/dhtml]dropdown probleem

[gitaarwerk]

Hoi.. ik ben bezig met een nieuwe layout voor men pagina, en daar hoort ook een normaal menu bij

aangezien ik niet kan dhtml-len of jscripten heb ik dus wat proberen te "rippen" uit een template maker.. ik dacht ik wil niet flauw zijn en ga er zelf mee aan de slag..

ok.. alles lukt wel aardig.. op het javascript gedeelte na.. daar ging het mij dus in princiepe alleen om. met div's werken lukt wel

Het probleem is het volgende :
De javascript geeft een waarde aan het bestand of die "aangevinkt" is of niet.
Als die niet aangevinkt is zal hij plaatje 1 weergeven, als hij wel aangevinkt is zal hij plaatje 2 aangeven.

Door in de javascript file een code te maken zal hij alles herkennen, de filename moeten bepaalde codes bevatten dus (in de bestandsnaam)

Mijn probleem is dat het me niet voor melkaar te krijgen van een goed werkend roll-over effect dus te krijgen..

hier de stukjes javascript die kijken naar je bestandsnaam :

code:

    if (DHTML) {

        // initalize the menu image objects
        for (i=0;i<=6;i++)
        {
            myObj = getObj("ml" + i)
            myObj.top = menuImages[i][2]
            myObj.left = menuImages[i][3]
            myObj.width = menuImages[i][4]
            myObj.visibility = menuImages[i][5]
            menuImages[i][0].src = "/images/img_menu/mg" + i + "-v-2-0.gif";
            menuImages[i][1].src = "/images/img_menu/mg" + i + "sel-v-2-0.gif";
        }

Hierboven de bestandsselectie (het verificatie/verander stukje klopt)

de bestandsnamen zijn dus :
mg4-v-2-0.gif (plaatje niet_over) en mg4sel-v-2-0.gif(plaatje wel_over)


hieronder toch even de functies van selecteren

code:

/*
    function SelectImage(nImg)
    This function sets the source of the image with number nImg to the selected version
*/
function SelectImage(nImg)
{
    document.images["mg" + nImg].src = menuImages[nImg][1].src;
}


/*
    function DeselectImage(nImg)
    This function sets the source of the image with number nImg to the deselected version
*/
function DeselectImage(nImg)
{
    document.images["mg" + nImg].src = menuImages[nImg][0].src;
}

Hieronder het stukje wat het scriptje aanroept :

code:

[img]"mg1-.gif"[/img]</a><a href="#" class="menuCommandLink" onMouseOver="fnImgMouseOver(1);" onMouseOut="fnImgMouseOut(1);">

Ok, je kan me lame vinden nu,... maar ik heb voor 70% het hele script veranderd (verbeterd) behalve javascript
magoed..

gaarne hulp

[crisp]

Als je nou eens begint met in je onmouseover en onmouseout de juiste functienamen te zetten...

[gitaarwerk]

nope..dat was het eerste naarwaar ik zat te kijken dat zet ie weer recht in de hele jscript file

[Verwijderd]

hoe ziet die jscript file er dan uit?

dit is toch niet de hele code neem ik aan.....

[ Voor 39% gewijzigd door Verwijderd op 16-02-2003 19:18 ]

[gitaarwerk]

ok..ik dacht namelijk dat dat niet nodig was.. hier komt de "geripte" versie

code:

/*

    NextWeb menu bar javascript code v0.2
    -------------------------------------
    Author: Akos Buzikay [ [e-mail] ]
    Created: 01/28/2001
    Target browsers: IE >= 5, NS >= 4
    Modifications: simplified

*/

var DHTML; /* DHTML support */

var detect; /* for browser detection */
var OS,browser,version,total,thestring; /* for browser detection */

var menuShown = 0;  /* stores which menu is stored right now */
var DefaultYPos = 83; /* Stores the default y position of the menues */
var menuImages =    new Array(
                        new Array(new Image(), new Image(), DefaultYPos, "14", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "65", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "139", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "201", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "259", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "319", "148px", "hidden"),
                        new Array(new Image(), new Image(), DefaultYPos, "377", "148px", "hidden")
                                  );  /* 6 dimensional array storing the menu images. Should contains as menu arrays, as the number of menu groups */

/*
    function InitLayers()
    This function initializes the layers. Hides them and sets default position
*/
function InitLayers()
{

    var myObj; /* stores the selected obj */

    // sniff out DHTML support
    DHTML = (document.getElementById || document.all || document.layers);

    // if Netscape add plus one pixel to top positon
    if (navigator.appName == "Netscape")
    {
        if (navigator.appVersion.charAt(0) != '4')
        {
            for (i=0;i<=6;i++) { menuImages[i][2] = 84 }
        }
    }

    if (DHTML) {

        // initalize the menu image objects
        for (i=0;i<=6;i++)
        {
            myObj = getObj("ml" + i)
            myObj.top = menuImages[i][2]
            myObj.left = menuImages[i][3]
            myObj.width = menuImages[i][4]
            myObj.visibility = menuImages[i][5]
            menuImages[i][0].src = "/images/img_menu/mg" + i + "-v-2-0.gif";
            menuImages[i][1].src = "/images/img_menu/mg" + i + "sel-v-2-0.gif";
        }

        if (document.layers)
        {
            /* Netscape does not care the event handlers in the div declarations so these are necessairy :( */

            document.layers["ml0"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml0"].onmouseout = fnDivMouseOut0;
            document.layers["ml0"].onmouseover = fnDivMouseOver0;
            document.layers["ml1"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml1"].onmouseout = fnDivMouseOut1;
            document.layers["ml1"].onmouseover = fnDivMouseOver1;
            document.layers["ml2"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml2"].onmouseout = fnDivMouseOut2;
            document.layers["ml2"].onmouseover = fnDivMouseOver2;
            document.layers["ml3"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml3"].onmouseout = fnDivMouseOut3;
            document.layers["ml3"].onmouseover = fnDivMouseOver3;
            document.layers["ml4"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml4"].onmouseout = fnDivMouseOut4;
            document.layers["ml4"].onmouseover = fnDivMouseOver4;
            document.layers["ml5"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml5"].onmouseout = fnDivMouseOut5;
            document.layers["ml5"].onmouseover = fnDivMouseOver5;
            document.layers["ml6"].captureEvents(Event.MOUSEOUT|Event.MOUSEOVER);
            document.layers["ml6"].onmouseout = fnDivMouseOut6;
            document.layers["ml6"].onmouseover = fnDivMouseOver6;
        }
    }
}


/* General event catcher functions */
function fnImgMouseOver(nImg)
{
    SelectImage(nImg);
    ShowMenu(nImg);
}

function fnImgMouseOut(nImg)
{
    DeselectImage(nImg);
    HideMenu(nImg);
}

function fnDivMouseOver(nDiv)
{
    SelectImage(nDiv);
    ShowMenu(nDiv);
}

function fnDivMouseOut(nDiv)
{
    DeselectImage(nDiv);
    HideMenu(nDiv);
}


/* These almost empty declarations are needed for Netscape to work, as there is 
no way to pass a parameter to a function when the browser invokes an event handler function */
function fnDivMouseOut0() {fnDivMouseOut(0);}
function fnDivMouseOver0() {fnDivMouseOver(0);}
function fnDivMouseOut1() {fnDivMouseOut(1);}
function fnDivMouseOver1() {fnDivMouseOver(1);}
function fnDivMouseOut2() {fnDivMouseOut(2);}
function fnDivMouseOver2() {fnDivMouseOver(2);}
function fnDivMouseOut3() {fnDivMouseOut(3);}
function fnDivMouseOver3() {fnDivMouseOver(3);}
function fnDivMouseOut4() {fnDivMouseOut(4);}
function fnDivMouseOver4() {fnDivMouseOver(4);}
function fnDivMouseOut5() {fnDivMouseOut(5);}
function fnDivMouseOver5() {fnDivMouseOver(5);}
function fnDivMouseOut6() {fnDivMouseOut(6);}
function fnDivMouseOver6() {fnDivMouseOver(6);}


/*
    function SelectImage(nImg)
    This function sets the source of the image with number nImg to the selected version
*/
function SelectImage(nImg)
{
    document.images["mg" + nImg].src = menuImages[nImg][1].src;
}


/*
    function DeselectImage(nImg)
    This function sets the source of the image with number nImg to the deselected version
*/
function DeselectImage(nImg)
{
    document.images["mg" + nImg].src = menuImages[nImg][0].src;
}


/*
    function ShowMenu(nMenu)
    This function shows the menu with number nMenu and sets the menuShown variable
*/
function ShowMenu(nMenu)
{
    var myObj;
    menuShown = nMenu;
    myObj = getObj("ml" + nMenu)
    myObj.visibility = "visible";
}


/*
    function HideMenu(nMenu)
    This function hides the menu with number nMenu and clears menuShown variable
*/
function HideMenu(nMenu)
{
    var myObj;
    menuShown = -1;
    myObj = getObj("ml" + nMenu)
    myObj.visibility = "hidden";
}


/*
    function getObj(name)
    This function always passes back the DIV object regarding to the DHTML support in the browser
*/
function getObj(name)
{
    if (document.getElementById)
    {
        return document.getElementById(name).style;
    }
    else if (document.all)
    {
        return document.all[name].style;
    }
    else if (document.layers)
    {
        return document.layers[name];
    }
}

[ Voor 105% gewijzigd door gitaarwerk op 16-02-2003 20:44 ]

[Verwijderd]

code:

[img]"mg1-.gif"[/img]</a><a href="#" class="menuCommandLink" onMouseOver="fnImgMouseOver(1);" onMouseOut="fnImgMouseOut(1);">

als ik ervanuit mag gaan dat de bovenstaande link ook naar de bovenstaande IMG-tag verwijst. Dan moet het nummer dat doorgegeven wordt bij de mouseover en mouseout handlers toch gelijk zijn aan de

<IMG NAME="mg1"....

en niet

<IMG NAME="mg0".....

correct me if i'm wrong....

[ Voor 39% gewijzigd door Verwijderd op 16-02-2003 21:30 ]

[gitaarwerk]

klopt.. heb ik al geprobeerd.. haalt niets uit helaas

[AkaXakA]

Gitaarwerk schreef op 16 February 2003 @ 18:17:
[..]

code:

    [..]
            myObj.width = menuImages[i][4]
            myObj.visibility = menuImages[i][5]
            menuImages[i][0].src = "/images/img_menu/mg" + i + "-v-2-0.gif";
            menuImages[i][1].src = "/images/img_menu/mg" + i + "sel-v-2-0.gif";
        }

[..]

de bestandsnamen zijn dus :
mg4-v-2-0.gif (plaatje niet_over) en mg4sel-v-2-0.gif(plaatje wel_over)
[...]

Kijk even goed......mg + -v-20.gif == mg-v-20.gif =! mg4-v-2-0.gif er moet een 4 bij!

[gitaarwerk]

daar was die i voor dacht ik .. die werkt als joker.

Een java guru die ik ken had em al een heel stuk voor melkaar, er moet wat extra's in de header bestand bij. Hopelijk spreek ik em vanavond. mocht et dan niet lukken dan post ik weer ff wat

[gitaarwerk]

hetis nog niet gelukt.. lijkt of het beeiligd is ..

ik heb de hele site gedownload naar schijf, maar dan doet ie het ook niet

[Willem2]

je doet 'myObj = getObj("ml" + i)' en de name tag van je image heet 'mg0'. Wijs je niet properties toe aan een niet bestaand/verkeerd object?

Eigenlijk verwacht ik dus ook een javascript error. Heb je al met de Mozilla/Netscape debugger gekeken wat voor foutmelding je krijgt? Linkje zou ook wel handig zijn...