[JS] image-knop zoals input type="button"

[Genoil]

Beetje rare topictitel, maar wat ik wil bereiken is het best zo te omschrijven. Ik wil een plaatjes-gebasseerd knopje maken dat zich exact zo gedraagt als een standaard input element met type= "button" of type = "submit", maar dan dus met 1 plaatje voor de up-state en 1 voor de down-state:


Klik de button aan, maar houdt de muisknop ingedrukt. Er gebeurt niks, alleen het plaatje verandert. Je kunt met je ingedrukte muis nu je hele desktop rond, maar het enige object dat reageert is het gedrukte knopje wanneer je daar weer overheen/vanaf gaat. Laat je de muis los boven het object dan vuurt ie bv een submit event af, laat je em erbuiten los dan laat ie het zitten.

Ik heb dit nu wel grotendeels werkend, middels een globale variabele (g_oActiveButton) op de pagina die gelijk is aan het laatstgeklikte knopje, of null. Deze zorgt ervoor dat mouseouts en mouseovers alleen effect hebben op een "gemousedownde", ofwel actieve knop.

Het probleem is alleen, dat ik niet weet hoe ik die variabele weer op null krijg wanneer ik de button aanklik (mousedown), terwijl ik de knop ingedrukt houd de muispointer van de knop wegbeweeg (mouseout), en dan ergens anders de knop weer loslaat. Er is dan geen onclick of onmouseup event dat gefired wordt, die vuren immers alleen waneer de muis boven je object zit. Het probleem is dan dat m'n zogenaamd actieve knopje ook weer z'n downstate laat zien wanneer ik slechts mouseover doe, zonder dat ik em eerst actief gemaakt heb met een mousedown, immers (g_oActiveButton != null)...

Dus ik zoek eigenlijk een soort event "mouseupanywhereexceptthisobject". Dat bestaat geloof ik niet. Iemand een oplossing??

[Bosmonster]

je kunt een variabele toggelen op onmouseout en dan de onmouseup van de body nemen misschien?

probleem is dan wel dat je het hele document moet gaan wijzigen zeg maar voor een simpel knopje, terwijl je met een kleine functionaliteit minder een net zo functioneel knopje krijgt wat dit niet vereist

[ Voor 54% gewijzigd door Bosmonster op 03-06-2003 17:29 ]

[Genoil]

Bosmonster schreef op 03 June 2003 @ 17:28:
je kunt een variabele toggelen op onmouseout en dan de onmouseup van de body nemen misschien?

ow wat simpel...dat werkt als een tierelier. ik was te lui om dat te proberen, omdat ik dacht dat events niet "doordruppelen" naar "ondergelegen" elementen...

probleem is dan wel dat je het hele document moet gaan wijzigen zeg maar voor een simpel knopje, terwijl je met een kleine functionaliteit minder een net zo functioneel knopje krijgt wat dit niet vereist

mwoah, 1 regel code erbij in een js file valt best mee! en ik heb natuurlijk een hele berg knopjes!
______________________________

overigens iets anders wat ik nog niet helemaal begrijp is hoe dat preloaden precies werkt. te simpel/triviaal om een topic over te openen ( net als m'n vorige vraag ) dus ik stop em er gewoon bij:

ok je preload je images:

code:

oImage      = new Image();
oImage.src  = sImageSource;
g_aImages.push(oImage);

op een gegeven moment ga je swappen:

oImage.src = sNewSource;

die src propery is gewoon een string. is het nou nodig om die sNewSource expliciet uit een lijstje gepreloade images te halen, of is de browser zich ervan bewust dat een image met exact dezelfde src al eens ingeladen is, en em daarom uit de cache haalt? Dus zeg maar dit:

code:

sNewSrc = oControl.src.replace(/_default/ , new String("_active")); 
oControl.src = SUB_ImageControl_GetImage(sNewSrc);

function SUB_ImageControl_GetImage(sImageSrc)
{
    for(m = 0; m < g_aImages.length; m++)
    {
        oImage = g_aImages[m];
        if(oImage.src == sNewSrc)
        {
            return oImage.src;
        }
    }
    return sImageSrc;
}

versus dit:

code:

oControl.src = oControl.src.replace(/_default/ , new String("_active"));

Het komt op hetzelfde neer, alleen is dat eerste heel omslachtig...of werkt het allebei niet zoals bedoeld met preloaden?

[ Voor 5% gewijzigd door Genoil op 03-06-2003 18:01 ]

[Bosmonster]

Nee hoeft niet. Als je images met javascript laadt, gaat de browsers ze vast ophalen en de image komt in je cache. Het plaatje zelf is dus gepreload en kun je gebruiken alsof die in de cache staat.