MouseOver, MouseOut, OnClick probleempje

[Phusebox]

ik zit met het volgende
ik heb een pagina in frames. bovenste frame is de navigatie
als je over de "buttons" gaat moet het plaatje geswapt worden
da's geen probleem
maar nu wil ik als je erop klikt (en in een ander frame de content wordt geladen) dat het plaatje dan geswapt blijft.

maar als je dan op een andere button klikt moet hij weer ge-unswapped worden.

kan dit?

heb al op dynamicdrive.com gezocht en ook hier op GoT maar nog niks zinnigs tegengekomen

[benoni]

Phusebox schreef op 11 mei 2004 @ 17:22:
ik zit met het volgende
ik heb een pagina in frames. bovenste frame is de navigatie
als je over de "buttons" gaat moet het plaatje geswapt worden
da's geen probleem
maar nu wil ik als je erop klikt (en in een ander frame de content wordt geladen) dat het plaatje dan geswapt blijft.

maar als je dan op een andere button klikt moet hij weer ge-unswapped worden.

kan dit?

heb al op dynamicdrive.com gezocht en ook hier op GoT maar nog niks zinnigs tegengekomen

Je kunt bij onClick() de naam van het aangeklikte plaatje bewaren in een variabele, bijvoorbeeld lastButton. Het scriptje dat bij onMouseOver() hoort pas je zo aan dat hij geen plaatje wisselt als de naam van het plaatje gelijk is aan lastButton. Aan het onClick scriptje voeg je vervolgens een functie toe die als er een naam in lastButton staat, het bijbehorende plaatje wisselt voor de normale versie.

[T-MOB]

in CSS:

code:

a#link1 { background: url(default.png)}
a#link1:hover {background: url(geswapped.png)} 
a#link1:active {background: url(geswapped.png)}

[Phusebox]

hmm ok ik ga eens proberen met CSS... de reply van benoni snap ik niet zo 123... ben helemaal niet thuis in javascripts enzo

edit:
lijkt erop dat ik ook geen verstand heb van CSS want ik krijg het niet voor elkaar

[ Voor 28% gewijzigd door Phusebox op 11-05-2004 18:12 ]

[sjaakaq]

T-MOB schreef op 11 mei 2004 @ 17:40:
in CSS:

code:

a#link1 { background: url(default.png)}
a#link1:hover {background: url(geswapped.png)} 
a#link1:active {background: url(geswapped.png)}

In IE werkt dit, in Opera en FireFox niet dacht ik; daar is een link active zolang je je muis erop hebt staan en klikt en niet langer.

[Verwijderd]

Je bedoelt waarschijnlijk te zeggen dat IE ':active' verkeerd heeft geimplementeerd en dat het in dit geval goed uitkomt, nietwaar?

[sjaakaq]

Dat neem ik aan. Ben de afgelopen maanden niet meer zo into het a:active element

(BTW, zie nu dat IE het soms wel verkeerd doet (dus de active status laten staan) en soms niet

[Pelle]

Wat snapte je precies niet aan je topic van 2 jaar geleden?
mouseover, mouseout, onclick ???

En hoe vond ik dat topic? Door te zoeken. Je hebt dus en niet gezocht, en je hebt die 2 jaar niet echt aangegrepen om je probleem eens wat verder te onderzoeken. Ik heb in dat topic een hele degelijke hint gegeven.. ik stel voor dat je daar eens naar gaat kijken.

[T-MOB]

Verwijderd schreef op 11 mei 2004 @ 19:59:
Je bedoelt waarschijnlijk te zeggen dat IE ':active' verkeerd heeft geimplementeerd en dat het in dit geval goed uitkomt, nietwaar?

Verrek je hebt gelijk... Altijd dat het IE's implementatie van :active correct was

Maargoed als je niets hebt aan de pseudoclass kun je het natuurlijk met een echte class oplossen.

code:

a#link1 { background: url(default.png)}
a#link1:hover {background: url(geswapped.png)} 
a#link1.active {background: url(geswapped.png)}

Dan maak je een javascript functie die onclick
1) De class van alle links leeg maakt
2) De class 'active' toewijst aan de geklikte link

[Phusebox]

Pelle schreef op 11 mei 2004 @ 20:51:
Wat snapte je precies niet aan je topic van 2 jaar geleden?
mouseover, mouseout, onclick ???

En hoe vond ik dat topic? Door te zoeken. Je hebt dus en niet gezocht, en je hebt die 2 jaar niet echt aangegrepen om je probleem eens wat verder te onderzoeken. Ik heb in dat topic een hele degelijke hint gegeven.. ik stel voor dat je daar eens naar gaat kijken.

sorry tussen 2 jaar en nu is er veel gebeurd... en heb ik me weinig bezig kunnen houden met vormgeving of html...
ik had dit topic wat je aanhaalde niet gevonden, en kan het me ook helemaal niet meer herinneren dat ik het heb aangemaakt...
en ja ik heb me er toch wel in verdiept. alleen tja, sommige dingen liggen iemand nu eenmaal niet zo... ik weet dat ik best dit allemaal moet kunnen begrijpen, ik bedoel mijn intelligentie zou dit niveau toch aan moeten kunnen, maar om een of andere reden krijg ik het maar niet in mijn hoofd

sorry als ik overbodige vragen stel en als het echt zo verkeerd is dan sluit het topic maar

dit topic lijkt het antwoord te hebben in de post van R+M

ware het niet dat ik geen idee heb wat ik met die code moet en hoe ik hem moet implementeren...
moet ik die code voor elke image gebruiken?
[rml][ js]onmouseover, onmouseout en onclick combi[/rml]

[ Voor 13% gewijzigd door Phusebox op 11-05-2004 22:43 ]

[Verwijderd]

Probeer het eens in dreamweaver. Die heeft er een standaard buttom voor. Kan je gelijk aangeven waar de link naar toe moet en in welk frame. een voorbeeldje kan je hier vinden www.trafosteenbergen.nl

[ Voor 3% gewijzigd door Verwijderd op 11-05-2004 22:42 ]

[Phusebox]

Verwijderd schreef op 11 mei 2004 @ 22:41:
Probeer het eens in dreamweaver. Die heeft er een standaard buttom voor. Kan je gelijk aangeven waar de link naar toe moet en in welk frame. een voorbeeldje kan je hier vinden www.trafosteenbergen.nl

hmm volgens mij is het geen standaard functie: een rollover wel ja... en dat zie ik ook op de site die je noemt maar niet iets waar je na te clicken de rollover state behoudt

[Verwijderd]

dat wordt stoeien met flash denk ik. Zal eens wat proberen te bakken

[benoni]

Phusebox schreef op 11 mei 2004 @ 22:44:
[...]

hmm volgens mij is het geen standaard functie: een rollover wel ja... en dat zie ik ook op de site die je noemt maar niet iets waar je na te clicken de rollover state behoudt

Als je met ouderwetsche Javascript-zonder-dynamische-css wilt werken: op een wat ouder projectje van ons is een scriptje gebruikt dat zo werkt.
Alleen zit daar een extra balloonfunctie aan vast, die kan ik nog wel even eruit strippen als je wilt.

Addit: gestript en een beetje aangepast aan 't niveau:

code:

wissellijst = new Object();
wisselplaat = new Image();
laatstekeus = "";

wissellijst["plaatje1"] = new Image();
wissellijst["plaatje1"].src = "plaatje1-rollover.jpg";
wissellijst["plaatje2"] = new Image();
wissellijst["plaatje2"].src = "plaatje2-rollover.jpg";
.... enz.

function rolwissel(plaatje, watwilje) {
    if (plaatje != "" && plaatje != laatstekeus) {
        if (watwilje == "klik") laatstekeus = plaatje;
        else if (watwilje == "uit" && wisselplaat) {
            document.images[plaatje].src = wisselplaat.src;
        }
        else {
            wisselplaat.src = document.images[plaatje].src;
            document.images[plaatje].src = wissellijst[plaatje].src;
        }
    }
}

En dan in de html:

code:

    <a href="linkje1.html onmouseover="rolwissel('plaatje1', 'in');"
        onmouseout="rolwissel('plaatje1', 'uit');"
        onclick="rolwissel('plaatje1', 'klik');">
        [img]"plaatje1.jpg"[/img]
    </a>

Ik heb 't nog niet getest hoor

[ Voor 57% gewijzigd door benoni op 12-05-2004 04:03 ]

[Phusebox]

benoni schreef op 11 mei 2004 @ 23:43:
[...]


Als je met ouderwetsche Javascript-zonder-dynamische-css wilt werken:

Addit: gestript en een beetje aangepast aan 't niveau:

code:

wissellijst = new Object();
wisselplaat = new Image();
laatstekeus = "";

wissellijst["plaatje1"] = new Image();
wissellijst["plaatje1"].src = "plaatje1-rollover.jpg";
wissellijst["plaatje2"] = new Image();
wissellijst["plaatje2"].src = "plaatje2-rollover.jpg";
.... enz.

function rolwissel(plaatje, watwilje) {
    if (plaatje != "" && plaatje != laatstekeus) {
        if (watwilje == "klik") laatstekeus = plaatje;
        else if (watwilje == "uit" && wisselplaat) {
            document.images[plaatje].src = wisselplaat.src;
        }
        else {
            wisselplaat.src = document.images[plaatje].src;
            document.images[plaatje].src = wissellijst[plaatje].src;
        }
    }
}

En dan in de html:

code:

    <a href="linkje1.html onmouseover="rolwissel('plaatje1', 'in');"
        onmouseout="rolwissel('plaatje1', 'uit');"
        onclick="rolwissel('plaatje1', 'klik');">
        [img]"plaatje1.jpg"[/img]
    </a>

Ik heb 't nog niet getest hoor

ok thanks, dit snap ik
het werkt dat ze aan gaan en aanblijven na geklikt
alleen daarna als je naar een andere gaat of klikt dan blijven ze aan

[ Voor 22% gewijzigd door Phusebox op 12-05-2004 08:49 ]

[benoni]

Oops... sorry!

code:

var wissellijst = new Object();
var wisseltruuk = new Object();

wissellijst.plaatje1 = new Image();
wissellijst.plaatje1.src = "plaatje1-rollover.jpg";
wissellijst.plaatje2 = new Image();
wissellijst.plaatje2.src = "plaatje2-rollover.jpg";
... enz.

function rolwissel(plaatje, watwilje) {
    if (plaatje != "" && plaatje != wisseltruuk.naamplaatje) {
        if (watwilje == "klik") {
            if (wisseltruuk.naamplaatje && wisseltruuk.bewaarplaat) {
                document.images[wisseltruuk.naamplaatje].src
                        = wisseltruuk.bewaarplaat.src;
            }
            wisseltruuk.naamplaatje = plaatje;
            wisseltruuk.bewaarplaat = wisseltruuk.wisselplaat;
        }
        else if (watwilje == "uit" && wisseltruuk.wisselplaat) {
            document.images[plaatje].src = wisseltruuk.wisselplaat.src;
        }
        else {
            wisseltruuk.wisselplaat = new Image();
            wisseltruuk.wisselplaat.src = document.images[plaatje].src;
            document.images[plaatje].src = wissellijst[plaatje].src;
        }
    }
}

Addit:
Je kunt ook uitgaan van een script die een stukje DOM-structuur uitbuit, zodat je niet bij elk linkje de mouseover, mouseout en click events hoeft toe te voegen. Er staat een leuk voorbeeld op Quirksmode.org, daar moet je dan wel de onthoudfunctie aan toevoegen voor het aangeklikte plaatje.

Psst:
^Dankjewel

[ Voor 33% gewijzigd door benoni op 12-05-2004 09:00 ]

[Phusebox]

benoni schreef op 12 mei 2004 @ 01:03:
Oops... sorry!

code:

var wissellijst = new Object();
var wisseltruuk = new Object();

wissellijst.plaatje1 = new Image();
wissellijst.plaatje1.src = "plaatje1-rollover.jpg";
wissellijst.plaatje2 = new Image();
wissellijst.plaatje2.src = "plaatje2-rollover.jpg";
... enz.

function rolwissel(plaatje, watwilje) {
    if (plaatje != "" && plaatje != wisseltruuk.naamplaatje) {
        if (watwilje == "klik") {
            if (wisseltruuk.naamplaatje && wisseltruuk.bewaarplaat) {
                document.images[wisseltruuk.naamplaatje].src
                        = wisseltruuk.bewaarplaat.src;
            }
            wisseltruuk.naamplaatje = plaatje;
            wisseltruuk.bewaarplaat = wisseltruuk.wisselplaat;
        }
        else if (watwilje == "uit" && wisseltruuk.wisselplaat) {
            document.images[plaatje].src = wisseltruuk.wisselplaat.src;
        }
        else {
            wisseltruuk.wisselplaat = new Image();
            wisseltruuk.wisselplaat.src = document.images[plaatje].src;
            document.images[plaatje].src = wissellijst[plaatje].src;
        }
    }
}

Addit:
Je kunt ook uitgaan van een script die een stukje DOM-structuur uitbuit, zodat je niet bij elk linkje de mouseover, mouseout en click events hoeft toe te voegen. Er staat een leuk voorbeeld op Quirksmode.org, daar moet je dan wel de onthoudfunctie aan toevoegen voor het aangeklikte plaatje.

Psst:
^Dankjewel

thanks... dit werkt perfect!! ik snap nu ook een beetje hoe het in elkaar zit, dus ik heb er ook weer wat van geleerd