[JS] Probleem met document.xxx aanwijzing

[MrDummy]

Ik heb tijdje geleden even zitten te proggen in JS. Ik was bezig om plaatje ter plekke te laten veranderen als men op klikt.
Het gaat om een expandable menu ontwerp.

Hier stukje met plaatje ernaast:

code:

            // showhide part
            if ($gcount_rows>$gcount) { $last=false; } else { $last=true; }
            echo "<tr><td width=\"18\" class=\"menu\"><a onClick=\"showHide('mymenu".$gcount."','icon".$gcount."','$last')\">";
            // switch image
            if ($view<>$data[id])
                { 
                if ($gcount_rows>$gcount) 
                    { echo "[img]\"images/plus.gif\"[/img]"; }
                    else
                    { echo "[img]\"images/plus_last.gif\"[/img]"; }
                }
                else
                {
                if ($gcount_rows>$gcount)
                    { echo "[img]\"images/min.gif\"[/img]"; }
                    else
                    { echo "[img]\"images/min_last.gif\"[/img]"; }
                ?><script language="JavaScript" type="text/JavaScript">
                <!--
                var theid='<? echo "mymenu".$gcount; ?>';
                menu_status[theid] = 'show';
                -->
                </script><?             
                }

Zoals je kan zien heb ik name= bij elke plaatje automatisch laten bepalen via PHP. Dus: icon1, icon2, icon3.... Hiermee kan ik met JS code laten aanwijzen om deze on the fly te veranderen. Opengevouwen krijgt dan [-] plaatje, en dichtgevouwen wordt [+] plaatje. Zo hoort het.

code:

<script language="JavaScript" type="text/JavaScript">
<!--
menu_status = new Array(); 

function showHide(theid,iconid,last){
    if (document.getElementById) {
    for (var i=0;i<document.images.length;i++)
        {
        if (document.images[i].name == iconid)
            { var id=i; }
        }

    var switch_id = document.getElementById(theid);
        if(menu_status[theid] != 'show') {
           switch_id.className = 'show';
           menu_status[theid] = 'show';
           if (last)
            { document.images[id].src = 'images/min_last.gif'; }
            else
            { document.images[id].src = 'images/min.gif'; }
        }else{
           switch_id.className = 'hide';
           menu_status[theid] = 'hide';
           if (last)
            { document.images[id].src = 'images/plus_last.gif'; }
            else
            { document.images[id].src = 'images/plus.gif'; }
        }
   }
}

//-->
</script>

Ervoor heb ik geprobeerd om b.v. document.icon[id].src = te gebruiken. Maar hier krijg ik een foutmelding van. Het is dus anders dan icon1 als naam.
De andere poging is de waarde-in-string gebruik.
Met document.iconid.src en de waarde binnenhalen via function bovenaan, dus iconid bevat dan waarde icon1, maar ook in dit geval werkt het niet.
Het staat dus vast dat de naam tussen document.xxxxx.src iets anders moet staan.
Een zoektocht op internet op aantal JS sites levert wat gegevens op, maar ik zie nog geen directe antwoord op mijn probleem.
Wel heb ik een andere probleem gevonden en dat is alle images verzamelen! Met document.images.length lus en vervolgens zoeken naar images[x] die dezelfde name heeft als b.v. icon1.
En als dat gevonden is, zet ik dan image nummer vast en dat werkt goed.

Alleen, dat zoeken naar image is niet zo geweldig, het is luie trick om wat op te zoeken en dat maakt minder snel. Voor ons menselijk oog merken we uiteraard niks van, maar het kan beter. Opzoeken is niet effectief. Direct wel.

Als je begrijpt wat mijn probleem is; weet iemand een directere oplossing in plaats van een zoeklus te gebruiken nar imagewaarde? Hiermee kan ik dan voor andere JS scripten ook de directe oplossing gebruiken. Ik ben benieuwd welke code daarvoor in de plaats komt...

(aanvulling: Uiteraard weet ik dat het normaal gesproken document.icon1.src moet worden als directe oplossing. Dat werkt wel. Maar dat is vast ingesteld en dat kan je niet dynamisch maken met boel andere iconen. Of ik moet PHP trick gebruiken, maar dat heeft 1 probleem: de pagina wordt niet herladen. De JS code verandert dus niet. De PHP dynamische verandering met b.v. document.<? echo $iconid; ?>.src heeft dus geen zin.)

[ Voor 16% gewijzigd door MrDummy op 16-06-2006 09:34 ]

[crisp]

JavaScript:

var name = 'icon1';
alert(document.images[name].src);

maar beter is om een ID te gebruiken:

JavaScript:

var id = 'icon1';
alert(document.getElementById(id).src);