Button in Form eines Bildes

[housefr3@k]

Hallo FSBler!

Ich muss eine Website erstellen. Dabei bin ich auf folgendes Problem gestoßen.

Ausgangsbasis: Ich hab eine Navigationsleiste mit mehreren Buttons in Form von Bildern. Um das ganze optisch aufzuwerten möchte ich, dass wenn ich mit der Maus über den Button fahre, sich die Hintergrundfarbe ändert, sprich ein anderes Bild geladen wird. Wenn ich wieder wegfahre, soll da Bild in seinen ursprünglichen Zustand zurückkehren. Bis dahin funktioniert alles.

Mein Problem: Ich möchte aber auch, dass wenn ich auf einen Button klicke, dieser "aktiv" bleibt - also den selben Zustand annimmt wie wenn ich mit der Maus darüber fahren würde. Dieser Zustand soll so lange aktiv bleiben, bis ich auf einen anderen Button klicke. Leider hab ich keine Ahnung, wie das funktionieren soll.

Ich hoffe, ihr versteht, was mein Problem ist und hoffe, dass ihr mir helfen könnt.

Bin für jede Hilfe dankbar.

mfg
housefr3@k

 

[Shadowww]

Ich hatte sowas mal vor ewigen Zeiten per JavaScript realisiert.

Auf der Seite sind oben 5 Buttons Die die Farbe bei Mauskontakt wechseln und darunter eine Vorschau. In dieser bleibt immer das Bild stehen das zum betreffenden Button passt.
Also, angenommen du fährst über den Button 1. Dann wechselt der die Farbe und in der Vorschau steht das Bild 1. Das Bild bleibt so lange stehen bis du über einen anderen Button fährst. Der Button selbst behält die Farbe zwar nicht, aber das könnte man ja durchaus daraus zurechtbasteln.
Ich hänge dir mal den Code an, vielleicht kannst du ja was damit anfangen.

Edit: Ich seh grad, der Button behält seine Farbe auch.

[CENTER][TABLE]
[TR]
[td]

Bildwechsel(2,Normal1) ; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv2)">
[IMG alt="Link 1"]https://finale.freesoft-board.to/buttonoff.gif[/IMG] [/td]
[td]

Bildwechsel(2,Normal1) ; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv3)">
[IMG alt="Link 2"]https://finale.freesoft-board.to/buttonoff.gif[/IMG] [/td]
[td]

; Bildwechsel(3,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv4)">
[IMG alt="Link 3"]https://finale.freesoft-board.to/buttonoff.gif[/IMG] [/td]
[td]

; Bildwechsel(0,Normal1) ; Bildwechsel(4,Normal1) ; Bildwechsel(5,Aktiv5)">
[IMG alt="Link 4"]https://finale.freesoft-board.to/buttonoff.gif[/IMG] [/td]
[td]

; Bildwechsel(3,Normal1) ; Bildwechsel(0,Normal1) ; Bildwechsel(5,Aktiv6)">
[IMG alt="Link 5"]https://finale.freesoft-board.to/buttonoff.gif[/IMG] [/td]
[/TR]
[/TABLE]



[TABLE]
[TR]
[td][IMG alt="Vorschau"]https://finale.freesoft-board.to/vorschau.jpg[/IMG]
height=340>[/td]
[/TR]
[/TABLE][/CENTER]

 

[Snip3r]

Wieso mit JavaScript lösen, wenn's auch mit CSS (und weniger Code) geht:

Button-Text

Hover ist das element, wo du gerade drüber bist und active, das welches gerade angeklickt (aktiv) ist

Schau dir dazu mal folgende Seite an: Pseudo-Klassen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

mfg
snip3r

PS: Bei fragen: einfach posten.

 

[Shadowww]

Oh, richtig.. Da steht ja nur wenn es angeklickt ist.

Vielleicht sollte ich mal erst lesen bevor ich hier meine alten HTML-Codes raussuche...

*peinlich*

 

[alpha-mat]

Mein Vorschlag hierzu:

Also für so eine Problemstellung bietet Dreamweaver eigentlich sehr gute Effekte mit den "Rollover" Funktionen wo man den vorher/nachher Effekt sehr fein einstellen kann - da ist auch z.b. ein Hell/Dunkel bzw. grau/farbig Effekt sehr leicht und sehr schön lösbar.

 

[Der Knodd]

Dazu muss es garnicht immer Dreamweaver sein.

Es gibt auch schon genügend freie WYSIWYG - Editoren.

...wobei Dreamweaver zu haben natürlich nicht schaden kann!

 

[housefr3@k]

Hi,
erstmal vielen Dank für die zahlreichen Lösungsvorschläge.

Leider wurde mein Problem dadurch nicht gelöst
Die Buttons sollen nämlich auch "aktiv" bleiben, nachdem man darauf geklickt hat und zwar so lange, bis man auf einen anderen der 5 Buttons klickt. Derzeit ist er nur für den Augenblick aktiv, wenn man mit der Maus darüber fährt oder ihn anklickt.
Korrigiert mich, falls ich mir ihren sollte, aber mit den CSS-Pseudoklassen "hover", "active", "linke", "visited", "focus" hab ich es nicht lösen können.

Ich hoffe, es gibt trotzdem wen, der mir weiterhelfen kann.

mfg
housefr3@k

 

[Shadowww]

Wenn du in meinem Code oben onMouseOver durch onClick ersetzt sollte das funktionieren, dass es erst beim Anklicken aktiviert wird und nicht schon beim drüberfahren.

 

[housefr3@k]

@ all:
Es scheint, als drück ich mich falsch aus
neuer Versuch:
Die Buttons stellen bestimmte Bereiche dar. Aus Gründen der Übersicht möchte ich, dass der Button so lange aktiv bleibt (selber Zustand einnimmt, wie wenn man darüber fährt oder ihn anklickt) bis man in einen anderen Bereich wechselt, sprich auf einen anderen Button klickt. Also auch noch, wenn ich mir bsp-weise den Content, der durch den Klick auf den Button angezeigt wird, durchlese.
Ich hoffe, ihr könnt euch jetzt ungefährt vorstellen, was ich meine.

 

[Broken Sword]

öhm, arbeitest du mit Frames?
Wenn nicht ist das doch Kinder-Kacke
Auf Seite A nimmst du im Menü an der Stelle von seite_a.jpg seite_a_active.jpg, auf Seite B nimmst du im Menü an der Stelle von seite_b.jpg seite_b_active.jpg und so weiter und mit dem :hover Ding wurde dir ja bereits gezeigt. Wenn du aber Frames benutzt, also das Menü immer das selbe ist, kommst du um JavaScript nicht herum.

Gruß
Broken Sword

 

[housefr3@k]

öhm, arbeitest du mit Frames?

Ja, ich arbeite mit iframes.

 

[Shadowww]

Funktioniert das nicht so wie geplant was ich dir geschickt habe?