Help: Buttoneffekt mit JavaScript

Computer: Software & Programmierung JavaScript & Script-Sprachen
1

Hallo :smile:

Ich habe folgendes JavaScript in meine HTML-Site eingebettet:

<!–ROLLOVER-EFFEKT.
isIm=(document.images)?1:0;
Norm=0;Over=1;Down=2;Bilder=new Array();

function AddBilder(name,BNorm,BOver,BDown)
{Bilder[name]=new Array(3);
Bilder[name][0]=new Image();Bilder[name][0].src=BNorm;
if(BOver!="") {Bilder[name][1]=new Image();Bilder[name][1].src=BOver;}
if(BDown!="") {Bilder[name][2]=new Image();Bilder[name][2].src=BDown;}
}

function RollIt(name,status)
{if((isIm)&(Bilder[name][status]!=null))
document.images[name].src=Bilder[name][status].src;}

//Die folgenden Zeile melden Rollover-Bilder an.
AddBilder(„BildNr1“,„Daten.jpg“,„Daten_on.jpg“,„Daten_on.jpg“);
AddBilder(„BildNr2“,„Kontakt.jpg“,„Kontakt_on.jpg“,„Kontakt_on.jpg“);
//–>

Also 2 Buttons „Daten“ und „Kontakt“, die ihre Farbe sagen wir von grau nach rot ändern, wenn man mit dem Mauszeiger über sie fährt. Auch wenn man klickt, wird der Button rot.
Das funxt soweit.

Doch wenn ich mit dem Mauszeiger wieder vom Button runtergehe, wird dieser wieder grau.

Aber jetzt möchte ich, dass wenn ich auf der Seite „Daten.html“ bin, dass der „Daten“-Button auch rot bleibt (also „Daten_on.jpg“ beibehält), und wenn ich dann auf den „Kontakt“-Button klicke und auf „Kontakt.html“ komme, soll der „Kontakt“-Button rot werden (also „Kontakt_on.jpg“), und der „Daten“-Button wieder grau.
So dass man halt am roten Button immer sehen kann, auf welcher Seite man sich gerade befindet.

Ich habe schon versucht, den mouseout-Befehl bei allen Buttons von Norm auf Over zu setzen, und dann bleibt der Button auch rot… allerdings bleibt er dann bei allen Buttons rot, und es soll immer nur der Button rot bleiben, auf dessen Seite ich mich gerade befinde.

Weiss jemand, welches zusätzlichen Code ich in mein JavaScript einfügen muss, um mein gewolltes Ergebnis zu erzielen?

Schonmal danke für die Mühe :smile:
mfG Tina

2

Hallo Tina.

Also: Nach mouseDown bleibe rot!

Dazu zwei Sachen:
Bei mouseDown auf einem Knopf den gerade roten (oder alle anderen) Knöpfe auf normal setzen.

Geht man auf den Knopf, der gerade rot ist, erstmal den aktuellen Zustand merken (also act = document.images[name].src)

beim mouseOut dann zunächst prüfen, ob der rot war, wenn ja eben nicht ändern!

mfg

Dirk

3

Hallo Dirk,

erstmal danke für deine Antwort!! :smile:

Was meinst du mit

Bei mouseDown auf einem Knopf den gerade roten (oder alle
anderen) Knöpfe auf normal setzen.

Soll ich ALLE onmousedown=„RollIt(‚BildNrX‘,Down);“ in
onmousedown=„RollIt(‚BildNrX‘,Norm);“ ändern??

Geht man auf den Knopf, der gerade rot ist, erstmal den
aktuellen Zustand merken (also act =
document.images[name].src)

Wo genau muss ich das denn im Code hinschreiben?

beim mouseOut dann zunächst prüfen, ob der rot war, wenn ja
eben nicht ändern!

Muss ich eine if-Abfrage für jeden einzelnen onmouseout-Befehl der einzelnen Bilder schreiben, oder kann ich eine allgemeingültige if-Abfrage in den -Bereich setzen?

Sorry wegen der vielen Fragen, aber ich kenne mich mit JavaScript noch nicht so sehr aus…
mfG Tina

4

Hallo PoiSoN:smile:

Aber jetzt möchte ich, dass wenn ich auf der Seite
„Daten.html“ bin, dass der „Daten“-Button auch rot bleibt
(also „Daten_on.jpg“ beibehält), und wenn ich dann auf den
„Kontakt“-Button klicke und auf „Kontakt.html“ komme, soll der
„Kontakt“-Button rot werden (also „Kontakt_on.jpg“), und der
„Daten“-Button wieder grau.
So dass man halt am roten Button immer sehen kann, auf welcher
Seite man sich gerade befindet.

Angenommen du befindest dich auf Daten.html (->Daten-Button rot) und klickst dann auf den Kontakt-Button muss 1. der Kontakt Button rot werden, 2. muessen der Daten Button bzw. alle anderen Buttons grau werden (Funktion wechsel() siehe unten).
Außerdem musst du dafür sorgen, dass der Button auch rot bleibt (dazu hab ich eine variable geladen[x]=true; gesetzt, die dann in der Funktion RollIt() abgefragt wird).
Beispiel:

<!–ROLLOVER-EFFEKT.
isIm=(document.images)?1:0;
Norm=0;Over=1;Down=2;Bilder=new Array();
Bilder[name]=new Array(3);
geladen=new Array(2);

function AddBilder(name,BNorm,BOver,BDown)
{Bilder[name]=new Array(3);
Bilder[name][0]=new Image();
Bilder[name][0].src=BNorm;
if(BOver!="") {Bilder[name][1]=new Image();Bilder[name][1].src=BOver;}
if(BDown!="") {Bilder[name][2]=new Image();Bilder[name][2].src=BDown;}
}

function RollIt(name,status)
{if((isIm)&(Bilder[name][status]!=null)&(!geladen[name]))

document.images[name].src=Bilder[name][status].src;}

//Die folgenden Zeile melden Rollover-Bilder an.
AddBilder(0,„Aktuelles.gif“,„Aktuellesa.gif“,„Aktuellesa.gif“);
AddBilder(1,„Aktuelles.gif“,„Aktuellesa.gif“,„Aktuellesa.gif“);

function wechsel(nr) {
for (var x=0; x<Bilder.length; x++) {
if(x!=nr) {
document.images[x].src=Bilder[x][0].src;
geladen[x]=false;
}
else if(x==nr) {
geladen[x]=true;
document.images[x].src=Bilder[x][2].src;
}
}
}//–>
//–>

Gruß

Sebastian

5

Hallo Tina,

Hier eine Seite, die so etwas wie gewünscht (hoffentlich) macht. Allerdings verwende ich „nur“ drei Bilder:
open.gif: Aktiver Eintrag
closed.gif: passiver eintrag
plus.gif: handover Bild

var activButton = „B1“
//wenn parameter (siehe unten den Hinweis) vorhanden, den
//hier verwenden und dann auch das Bild setzen
//document.getElementsByName(name)[0].src=„open.gif“;
// dann brauchst du auch keines (hier B1) vorher schon setzen

function over(name)
{document.getElementsByName(name)[0].src=„plus.gif“;}

function out(name)
{
document.getElementsByName(name)[0].src=„closed.gif“;
//oder lieber nicht?
if (name = activButton)
document.getElementsByName(name)[0].src=„open.gif“;

function clickMe(name)
{
document.getElementsByName(activButton)[0].src=„closed.gif“;
document.getElementsByName(name)[0].src=„open.gif“;
activButton = name;
}

erster Button

zweiter Button

dritter Button

vierter Button

Sollte so klappen und vielleicht helfen.

Aber leider ein Hinweis: wenn du mit dem Klick eine neue Seite im selben Fenster öffnest, kennt die keinen aktiven Knopf. Entweder du benutzt Frames (in einem Frame den jeweiligen Inhalt laden) oder du übergibst einen Parameter and die Seite. Mit dem kannst du dann den aktiven Knopf markieren. Wie man einen Parameter ausliest kriege ich jetzt nicht mehr hin. Bei Interesse melde ich mich wieder.

mfg

Dirk.