Buttons mit mouseover, mouseout und onclick

misterfloppyWOB · 23. September 2003

Hallo zusammen,

ich brauche dringend eurer fachliche Hilfe.
Ich bin in Sachen Javascript noch ein ziemlicher Newbie.

Nun aber zu meiner Frage.
Ich möchte gerne 4 Buttons in einer Reihe so gestalten, dass bei mouseover bzw. mouseout die Farbe der Buttons geändert wird.
Zudem soll erkannt werden (auch durch die Buttonfarbe), welcher der vier Buttons aktuell gedrückt wurde. D.h. wenn ich auf den ersten Button drücke, dann bleibt dieser solange z.B. blau bis ich auf den zweiten drücke. Betätige ich nun den zweiten Button, so wird dieser blau und der erste bekommt wieder seine Ausgangsfarbe usw.....

Das Ganze soll nicht durch GIF's für die Buttons realisiert werden, da sich die Button-Beschriftung dynamisch ändern soll.

Ich hoffe ich konnte mein Problem einigermaßen verständlich darstellen. Vielen Dank im Voraus für eure Hilfe

Gruss
misterfloppyWOB

rootssw · 23. September 2003

Das dürfte wahrscheinlich relativ einfach zu erklären sein.

Aber da ich ja immer gleich alles Testen muss, hab' ich gleich ein Script geschrieben.

Das Ergebnis sieht dann so aus, wie unter folgendem Link (hab's mal zum Test eingerichtet - nicht dass du das Script umsonst kopierst...):

http://www.nasicunion.de/tutor/buttons.html

Das Script dazu sieht so aus:

Code:

<HTML><Body><Script Language="JavaScript" Type="Text/JavaScript">
var Buttons = document.getElementsByName("Button");	

var Active = "";

function CheckButton(Num) {
		if (Active != "" && Active != Num) {
			Buttons[Active].style.backgroundColor = "#FF0000";
		}
		Buttons[Num].style.backgroundColor = "#0000FF";
		Active = Num;
}

function ChangeColor (Num, Color){
	if (Active != Num) {
		switch (Color) {
			case '0':
				Buttons[Num].style.backgroundColor = "#00FF00";
				break;
			case '1':
				Buttons[Num].style.backgroundColor = "#FF0000";
				break;
		}
	}
}

</Script>

<Form Name="Formular">
<Button Name="Button" Type="Button" Value="Button1" style="BackGround-Color: #FF0000; Width: 60px" onMouseOver="ChangeColor('0','0')" onMouseOut="ChangeColor('0','1')" onClick="CheckButton('0')">
Button 1
</Button>
<Button Name="Button" Type="Button" Value="Button2" style="BackGround-Color: #FF0000; Width: 60px" onMouseOver="ChangeColor('1','0')" onMouseOut="ChangeColor('1','1')" onClick="CheckButton('1')">
Button 2
</Button>
<Button Name="Button" Type="Button" Value="Button3" style="BackGround-Color: #FF0000; Width: 60px" onMouseOver="ChangeColor('2','0')" onMouseOut="ChangeColor('2','1')" onClick="CheckButton('2')">
Button 3
</Button>
<Button Name="Button" Type="Button" Value="Button4" style="BackGround-Color: #FF0000; Width: 60px" onMouseOver="ChangeColor('3','0')" onMouseOut="ChangeColor('3','1')" onClick="CheckButton('3')">
Button 4
</Button>
</Form>
</Body>
</HTML>

Mit Sicherheit lässt sich dieses noch verbessern, aber es dient ja auch nur zum funktionellen Überblick.
Ich hoffe, dass das das ist, was dir vorschwebte?

misterfloppyWOB · 24. September 2003

SUPER, ist genau das was ich gesucht habe. Vielen Dank rootssw
für Deine schnelle und gute Hilfe.

Eine Frage hätte ich aber noch. Wie bzw. was müsste man ändern, damit ich per Button (onClick) einen Verweis (href) aufrufen kann. Ich möchte nämlich, dass wenn ich einen Button drücke in einem anderen frame eine neue Seite geladen wird. Geht das überhaupt? Die Funktion onClick wird doch schon verwendet, oder?

Vielen Dank vorab

Gruss
misterfloppyWOB

Andreas Gaisbauer · 25. September 2003

Hallo

@rootssw: Schöne Lösung die <Button>s zu verwenden

zum Thema: hab dir die Funktion etwas erweitert...

Code:

<html>
<head>

<Script Language="JavaScript" Type="Text/JavaScript">
var Buttons = document.getElementsByName("Button");	

var Active = "";

var Frame = 'mainFrame';

function CheckButton(Num,URL) {
    if (Active != "" && Active != Num) {
        Buttons[Active].style.backgroundColor = "#FF0000";
    }
    Buttons[Num].style.backgroundColor = "#0000FF";
    Active = Num;
    top.frames[Frame].location.href = URL;
}

function ChangeColor (Num, Color){
    if (Active != Num) {
        switch (Color) {
            case '0':
                Buttons[Num].style.backgroundColor = "#00FF00";
		break;
	    case '1':
		Buttons[Num].style.backgroundColor = "#FF0000";
		break;
	 }
    }
}

</Script>
</head>
<body>
<form name="Formular">
<button name="button" Type="button" value="Button1" 
 style="Background-Color: #FF0000; Width: 60px" 
 onMouseOver="ChangeColor('0','0')" 
 onMouseOut="ChangeColor('0','1')" 
 onClick="CheckButton('0','http://www.google.de')">
 Button 1
</button>
<button name="button" Type="button" value="Button2" 
 style="Background-Color: #FF0000; Width: 60px" 
 onMouseOver="ChangeColor('1','0')" 
 onMouseOut="ChangeColor('1','1')" 
 onClick="CheckButton('1','http://www.heise.de')">
 Button 2
</button>
<button name="button" Type="button" value="Button3" 
 style="Background-Color: #FF0000; Width: 60px" 
 onMouseOver="ChangeColor('2','0')" 
 onMouseOut="ChangeColor('2','1')" 
 onClick="CheckButton('2','http://www.drweb.de')">
 Button 3
</button>
<button name="button" Type="button" value="Button4" 
 style="Background-Color: #FF0000; Width: 60px" 
 onMouseOver="ChangeColor('3','0')" 
 onMouseOut="ChangeColor('3','1')" 
 onClick="CheckButton('3','http://www.tutorials.de')">
 Button 4
</button>
</form>
</body>
</html>

Erklärung:
Die URL gibst du bei onClick="CheckButton('0','http://www.google.de')"> an. Wichtig is das sie mit einem Komma vom ersten Parameter getrennt ist und in Singlequotes ( ' ) steht...
Oben im Skript gibst du einmal den Zielframe an: var Frame = 'mainFrame'; wobei du nur "mainFrame" an deine Bedürfnisse anpassen musst - der Rest funktioniert von alleine...

ciao Andreas

rootssw · 25. September 2003

Hallo nochmal!

@Andreas Gaisbauer
Das ist zwar ganz gut, aber ich hab' die Idee mit der "Erweiterung" noch etwas konsequenter umgesetzt.

Mit anderen Worten, ich hab' das ganze so gemacht, dass man in der navi.js nur noch oben die verschiedenen Farben (für onMouseOver - ColorMOver, für onMouseOut - ColorMOut und für Aktive Buttons - ColorActive).

Dann brauch man in den Arrays (die in der selben Datei - nur etwas wieter drunter definiert sind) noch die Daten für die Buttons angeben (man kann soviele Buttons angeben, wie man will):

für den Namen des jeweiligen Buttons:
Einfach hier die Namen einsetzen:
var Titles = new Array(
'Seite 1',
'Seite 2',
'Seite 3',
'Seite 4');

Und für das Ziel des Buttons:
Einfach hier die URL einsetzen:

var HRefs = new Array(
'page1.html',
'page2.html',
'page3.html',
'page4.html');

Dabei solltest du beachten (das ist jetzt übrigens längst wieder an misterfloppyWOB gerichtet), dass du für jeden Button einen Link definieren musst
(Nicht, dass da noch irgendwo 'ne Lücke entsteht).

Geht das überhaupt? Die Funktion onClick wird doch schon verwendet, oder?

Man kann in die Event-Handler so viele Anweisungen hineinschreiben, wie man will! Du musst nur darauf achten, die einzelnen Anweisungen mit einem ";" zu schließen. Außerdem solltest du nicht zu viele Anweisungen oder Funktionen in die Event-Handler setzen, sonst wird's unübersichtlich.

Ich hab' die Seite, so wie sie aussehen könnte mal hier ins Netz gestellt.
Das Gleiche pack' ich auch nochmal in den Anhang.

Diese Seite stellt auch gleich fest, welche Seite gerade im Frame "content" activ ist (immer beim Reload).
Zur Art und Weise der Funktion brauch ich doch nichts mehr sagen, oder?
Falls doch, einfach posten.

misterfloppyWOB · 30. Oktober 2003

Hallo zusammen,

ich hatte für einige Zeit leider keinen Internet Zugang und konnte daher nicht auf die Beiträge zugreifen. Zuerst einmal vielen Dank an rootssw und Andreas für Ihre Hilfe.

Grundsätzlich hab ich vier 4 Buttons in einer Reihe. Weiter unten auf der gleichen Seite habe ich einen iframe definiert indem dann bei onClick die entsprechende neue Seite geladen werden soll. Dabei soll die entsprechende Seite (projektverweis) auf die verlinkt wird bei onClick mit als Parameter übergeben werden. Die Button Bezeichnung soll zudem in der Html Datei stehen.

@Andreas - Ich habe Dein Beispiel ausprobiert. Leider hat's bei mir irgendwie nicht funktioniert. Kann es daran liegen, dass ich einen iframe benutze? Es erscheint folgender Fehler - 'top.frames[...].location' ist Null oder kein Objekt. Ich habe als Zielframe in der var Frame den iframe als Zielframe angegeben. Hast Du da irgendeine Idee?

@rootssw - Das ist eigentlich genau das was ich suche. Nur mit dem Unterschied das ich einen iframe benutze und die Buttonbezeichung bzw. die zu den Buttons gehörenden Links nicht in der entsprechenden .js Datei stehen soll sonder wie oben beschreiben.

Ich weiss ich weiss immer diese Anforderunge von irgendwelchen Newbies ;-). Trotzdem vielen Dank schon mal im Voraus. Ich hoffe Ihr könnt mir helfen.

Grüsse
mistefloppyWOB

Buttons mit mouseover, mouseout und onclick

misterfloppyWOB

Grünschnabel

rootssw

Erfahrenes Mitglied

misterfloppyWOB

Grünschnabel

Andreas Gaisbauer

Erfahrenes Mitglied

rootssw

Erfahrenes Mitglied

Anhänge

misterfloppyWOB

Grünschnabel

Neue Beiträge