---

Geschrieben von haumi am 30.12.2010 um 00:08:

  Aufbau eines top-Buttons

Anhand eines top-Buttons möchte ich stellvertretend für alle Linkaufrufe
(Hyperlinks) mal den Aufbau erklären.
Hyperlinks oder auch Verweise auf andere Internetseiten werden in html mit dem Befehl <a> eingeleitet.
Hier steht a für Anker und es ist unbedingt ein schließendes </a> nötig.
Das Verweisziel wird als Wert dem Attribut href ( hyperlink reference - Ziel des Verweises) übergeben.
somit sieht z. B. ein Verweis zur Googleseite wie folgt aus:

<a href="http://www.google.de"></a>

Das ist nun der nackte Verweis aber er wird in html nocht nicht sichtbar.
Um ihn sichtbar und somit anklickbar zu machen kann man einen Text oder auch eine Grafik verwenden.
Als Text sähe es z. B. so aus:

<a href="http://www.google.de">Zur Googleseite!</a>

und als Grafik:

<a href="http://www.google.de"><img src="images/googlebutton.gif" /></a>

Nun zu unserm Top-Button.
Um die Startseite (indexseite) über den Topbutton Start aufzurufen müssen wir folgendes notieren:

<a href="index.php">img src="images/top_start.gif" /></a>

das reicht aus, um den Button (top_start.gif) in der html Seite sichtbar und anklickbar darzustellen.
In unserm Fall steht hinter dem Link noch {$SID_ARG_1ST}.
Das ist eine Sessionsid und diese begleitet das Mitglied auf all seinen Wegen im Board und braucht uns hier erst mal nicht zu interessieren.

Weiterhin steht im Board statt images {$style['imagefolder']}.
Das ist eine php-Variable, in der der Bilderordner des benutzten Styles an Hand einer id hinterlegt ist.
Haben wir nur einen Style, würde images ausreichen.
Da Hyperlinks vereinbarungsgemäß mit einem Unterstrich ausgestattet sind
(Grafiken somit mit einem kleinen Rahmen) wird im Board mit border="0" der Rahmen um die Grafik unterdrückt-
Nun existieren noch zwei Attribute alt und title,
die beide die selbe Zuweisung bekommen - hier: {$lang->items['LANG_GLOBAL_TOINDEX']}
Hier könnte auch der Text stehen Zur Startseite.
Da das wbb2 jedoch mit Sprachvariablen ausgestattet ist wird hier wiederum eine php-Variable ($lang) eingesetzt und der Text, welcher sich in der Sprachvariable LANG_GLOBAL_TOINDEX befindet kommt zur Anzeige.
Was bedeutet nun alt und title?
Nun alt steht für alternativtext und der Text wird angezeigt wenn das gif nicht gefunden wird.
title steht für einen Hinweis, der angezeigt wird, wenn man mit der Maus über den top-Button fährt.

Somit sieht ein Top-Button am Ende so aus:

code: 1: 2: <a href="index.php{$SID_ARG_1ST}"><img src="{$style['imagefolder']}/top_start.gif" border="0" alt="{$lang->items['LANG_GLOBAL_TOINDEX']}" title="{$lang->items['LANG_GLOBAL_TOINDEX']}" /></a>

Zum img-Tag:
Mit dem img-Tag (img -> image -> Bild) werden Grafiken in html-Seiten eingebunden.
änhlich wie beim a-Tag dem Attribut href der Link zur neuen Webseite übergeben wird,
so wird beim img-Tag Der Link zum Bild dem Attribut src (source -> Quelle) bergeben.

Man kann in beiden Fällen sowohl relative oder absolute Pfade angeben.

relative Angabe wäre z. B. "images/google.gif"
absolute Angabe wäre z. B. "http://www.haumis-wbb-hilfe.de/wbb2/images/google.gif"

Bei der relativen Angabe ergänzt der Browser den Link automatisch mit dem aktuellen URL der Ausgangsdatei,
so dass im Endeffekt zwar wieder ein Absoluter Pfad vorhanden ist, aber man ist nun unabhängig wenn die Webseite auf einen anderen Server gelegt oder umbenannt wird.
Ausgangsverzeichnis ist IMMER das root-Verzeichnis >(Haupt- oder Wurzelverzeichnis) und das ist im Normalfall der Ordner wbb2.


php-Variable, Sprachvariable sowie Unterstrich (Rahmen beim gif)
werden später erläutert.

Wenn irgendetwas unklar sein sollte bitte nachfragen.
Anhand von Beispielen kann das dann individuell getestet werden, wobei das mit dem Grafikrahmen mit einbezogen wird.
php kommt später dran.

LG
haumi