Start
Vorherige Nächste
7. Die Menüs / 7.9 Funktionen im Menü Web

### 7.9.4 Knopf erzeugen

Eine häufige Aufgabe beim Webdesign ist es, Druckknöpfe zu erstellen. Diese Drückknöpfe sind oftmals animiert: befindet sich die Maus über dem Knopf, wird dieser vorselektiert, wird die Maustaste gedrückt, wird auch der Knopf gedrückt. Knopf erzeugen soll genau diese Aufgabe vereinfachen.

In einem kleinen Vorschaubild ist der aktuelle Knopf zu sehen. Über Radioknöpfe, die darunter angeordnet sind, kann ausgewählt werden, ob der Zustand Normal, der Zustand Maus über Knopf oder der Zustand Knopf gedrückt bearbeitet werden soll. Alle drei Zustände können sich hinsichtlich Farbe, Form, Text und sonstiger Effekte unterscheiden. Um das Aussehen der drei Zustände untereinander abzugleichen, gibt es Alle gleich. Wird dieser gedrückt, übernehmen die beiden anderen Zustände das Aussehen des aktuellen. Dabei kann mit einer Auswahlliste festgelegt werden, welche Eigenschaften übernommen werden sollen.

Knopf legt das grundsätzliche Aussehen des Knopfes fest: die Farbe, die Form und die Größe vorgegeben durch Breite und Höhe. Bei der Form kann aus einer großen, vordefinierten Liste (siehe Kapitel 4.19) ausgewählt werden. Mit Effekt können dem Knopf verschiedene Ebeneneffekte zugewiesen werden.

In der Einstellungsgruppe Text kann das Aussehen der Knopfbeschriftung verändert werden. Text gibt dabei den Text der Beschriftung vor. Daneben können noch die Schriftart, die Schriftgröße und die Farbe der Schrift verändert werden. Position verändert die vertikale Position des Textes, es wird also die Grundlinie des Textes verschoben. Effekt erlaubt es, dem Text Ebeneneffekte zuzuweisen (siehe Kapitel 7.8.41).

URL für den gedrückten Knopf legt die URL fest, die angezeigt werden soll, wenn der Knopf auf der Webseite angeklickt wird.

Hilfetext (Tooltip) legt den Hilfetext fest, der erscheint, wenn die Maus auf der Webseite eine gewisse Zeit über dem Knopf stillsteht.

Wird Code erzeugen gedrückt, erscheint ein Dateiauswahldialog. Unter dem in diesem Dialog eingegebenen Namen wird der Code für den Knopf in Form einer HTML-Datei gespeichert. Zusätzlich werden drei Bilddateien mit dem gleichen Namen, einer fortlaufenden Nummerierung und der Erweiterung ".gif" angelegt. Der Code besteht aus 2 Teilen, zum einen aus einer Javascript-Funktion:

<title>PhotoLine Button</title>

<script language="javascript" type="text/javascript">

Aqua1 = new Image();

Aqua1.src = "Aqua1.gif";

Aqua2 = new Image();

Aqua2.src = "Aqua2.gif";

Aqua3 = new Image();

Aqua3.src = "Aqua3.gif";

function show(buttonname, buttonvar)

{

document.images[buttonname].src=buttonvar.src;

}

</script>

und zum anderen aus dem eigentlichen Knopf:

<a href="mypage.htm" target="_self" onMouseout="show('Aqua', Aqua1);" onMouseup="show('Aqua', Aqua1);" onMouseover="show('Aqua', Aqua2);" onMousedown="show('Aqua', Aqua3);">

<img src="Aqua1.gif" border="0" alt="Mein Knopf" name="Aqua"></a>

Diese beiden Teile müssen in die eigene HTML-Datei an der entsprechenden Datei eingefügt werden: der Javascript-Code in den head-Bereich, der Knopf in den body-Bereich.

Sollen mehrere Knöpfe in eine HTML-Datei, muss die Javascript-Funktion "show" nur einmal eingefügt werden, das Preloading ("Aqua1 = new Image(); ...") und der Knopfbereich aber für jeden Knopf. Sollen mehrere Knöpfe in eine HTML-Datei, müssen alle Knöpfe unterschiedliche Namen besitzen.