Buttonwechsel im grafischen Menü von Champ, 26.09.2005 12:43

Buttonwechsel im grafischen Menü

Champ 26.09.2005 12:43

grafik

Hi alle.
Ich such nun seit einigen Stunden und hab so einiges entdeckt, Quelltext-Fragmente in JS, PHP und CSS.
Doch so richtig gefällt mir/funktioniert nix davon.

Folgendes Problem:
3 Frames.
---------------------
Frame1
---------------------
Frame2 -  Frame3
       -
       -
       -
       -
---------------------

Hier die Testseite: www.ofze.de/secret

Frame1 enthält nur das Titelbild, im Frame2 ist das Menü enthalten (ca. 9 Buttons untereinander) und im Frame3 soll dann jeweils nach nem Klick auf einen Menübutton die Seite erscheinen. Kein Problem bisher.

Die Buttons
Und zwar wird ein Button immer durch 3 Bilder dargestellt, eins für die normale Anzeige, das zweite für den gewöhnlichen Hovereffekt und das dritte Bild für den Aktiv (also onclick)-Status. Ich hab das jetzt rein mit CSS gemacht.
Funktioniert und sieht toll aus ABER:

***************************
Problem:
Habe ich auf einen Button geklickt(zunächst von normal-->hover, dann wird das Bild für den aktivierten Zustand angezeigt), öffnet sich die Seite im Frame3, und klick ich nun mit der Maus irgendwo hin, verschwindet das aktivierte Buttonbild und es erscheint wieder das normale. So soll es aber nicht sein, sondern das Aktiv-Bild soll die ganze Zeit angezeigt werden, bis ein anderer Button angeklickt wird.
****************************

Ausschnitt aus dem Quelltext:
Innerhalb vom <Head> werden die Anweisungen geschrieben:

<style type="text/css">
p.home1 a { background: url(../bilder/menu_main/buttons/home_01_norm.png) no-repeat; width:175px; height:37px;}
p.home1 a:hover { background: url(../bilder/menu_main/buttons/home_01_mover.png) no-repeat; width:175px; height:37px;}
p.home1 a:active { background: url(../bilder/menu_main/buttons/home_01_act.png) no-repeat; width:175px; height:37px;}

p.home2 a { background: url(../bilder/menu_main/buttons/news_01_norm.png) no-repeat; width:175px; height:37px;}
p.home2 a:hover { background: url(../bilder/menu_main/buttons/news_01_mover.png) no-repeat; width:175px; height:37px;}
p.home2 a:active { background: url(../bilder/menu_main/buttons/news_01_act.png) no-repeat; width:175px; height:37px;}

p.home3 a { background: url(../bilder/menu_main/buttons/phil_01_norm.png) no-repeat; width:175px; height:37px;}
p.home3 a:hover { background: url(../bilder/menu_main/buttons/phil_01_mover.png) no-repeat; width:175px; height:37px;}
p.home3 a:active { background: url(../bilder/menu_main/buttons/phil_01_act.png) no-repeat; width:175px; height:37px;}

...und dann im <body>:

Ich denke das ist soweit verständlich und einfach gehalten. Nun ändert sich aber wie bereits beschrieben der aktiv-Button zum Normal-Button, wenn man irgendwo hinklickt, es dauert leider irgendwie zu lange mit dem Bildernachladen (Sanduhr erscheint immer) und das ganze lässt sich nicht in Browsern != IE anzeigen.

Kann mir jemand mit Ratschlägen/Quelltextveränderungen helfen?

DANKE!

Beitrag melden

– Informationen zu den Bewertungsregeln

Buttonwechsel im grafischen Menü
Christoph Schnauß 26.09.2005 13:25

grafik
– Informationen zu den Bewertungsregeln
hallo,

Kann mir jemand mit Ratschlägen/Quelltextveränderungen helfen?

Da gibt es mehrere Dinge, die du korrigieren solltest.
Zuerst: da du sowieso PHP verwendest, kannst und solltest du auf Frames völlig verzichten. Deine Navigation kannst du auch in eine eigene include-Datei stecken, die von jeder anderen Seite eingebunden wird.
Zweitens: prinzipell ist es richtig, auf CSS zu setzen. Nur steckt in den für <a> angegebenen Hintergrundbildern ein prinzipieller Denkfehler, der sich dann in deinem HTML-Code bemerkbar macht:

<a href="../pages/home.php" target="news"></a>

Da gibt es halt nichts, was anzuzeigen wäre. Das ändert sich schlagartig, wenn du daraus
<a href="../pages/home.php" target="news">Verweistext</a>
machst.
Drittens: den "Aktivzustand" für <a> verlierst du selbstverständlich spätestens dann, wenn deine Maus an anderer Stelle aktiv wird (klickt). Wenn du das Erscheinungsbild deines Menüs ändern möchtest, so daß für die angezeigte Seite dann ein anderer Button aufgerufen wird, hast du zwei Möglichkeiten - entweder du tauschst mit Hilfe eines EventHandlers die Grafiken aus, oder (was vorzuziehen ist) du wechselt die Grafik, indem beim Neuaufruf des Menüs bzw. der Seite eine andere CSS eingesetzt wird.

Grüße aus Berlin

Christoph S.

--
mailto:christoph.schnauss@berlin.de
http://www.christoph-schnauss.de
ss:| zu:) ls:& fo:) va:) sh:| rl:|
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Champ: Buttonwechsel im grafischen Menü