brain-and-trust

PHP - Tutorials

PHP - Einführung

Sitemap

Kontakt

Impressum

LOG IN

LOG OUT


HOME > PHP - Tutorials > Erstellen von Schaltflächen mit PHP >


Erstellen einer einfachen Schaltfläche für wechselnde Texte

Mit dem folgenden Script möchten wir demonstrieren, wie bequem und schnell Sie variierenden Text auf ein und dieselbe Schaltfläche schreiben können. Die hier vorgestellte Methode erspart Ihnen die Mühe, für Ihr Webseitenprojekt viele Schaltflächen mit jeweils fester Beschriftung zu erstellen. Das Script, das wir hier schreiben, gibt eine Grafikdatei zurück, die dann den beim Aufruf über die URL jeweils übergebenen Text anzeigt.

Die hier vorgestellten Befehle setzen die GD-Extension voraus. Lesen Sie das Tutorial zur Installation, um die GD-Extension zu aktivieren. Die meisten Provider haben diese Erweiterung aktiviert.

INHALT

    Erstellen der Grafik
    Erläuterung des Scripts

Erstellen der Grafik

Die Schaltfläche selbst besteht aus einem einfachen Rechteck mit schwarzem Rand, wobei sie den Vorteil bietet, dass die Breite und Höhe der Schaltfläche je nach Text und Schriftart angepasst werden können.
Die Schriftart und die Randbreiten können mit Hilfe der URL übergeben werden, geschieht dies nicht, verwendet das Script die festgelegten Standardwerte.

Der Aufruf der Schaltfläche erfolgt über einen normalen <Image>-Tag, wobei die für die Erstellung der Grafik benötigten Informationen mit Hilfe der URL übergeben werden. Sie schreiben in den <image>-Tag der Webseite, für die Sie die Schaltfläche verwenden möchten, dann also - generell ausgedrückt - <image src= "schalt.php?text=schaltflaechentext">, sofern das Script für die Schaltfläche schalt.php heißt.

Denken Sie daran, dass der Text, der auf der Grafik abgebildet werden soll, vor der Übergabe mithilfe der Funktion urlencode() für die Übermittlung per URL vorbereitet werden muss, damit er keine Zeichen enthält, die stören. Ein Aufruf der Schaltfläche mit Hyperlink und Schriftattributen könnte in einem HTML-Bereich z.B. auf die folgende Art und Weise geschehen:

<a href='zieladresse'><img border="0" src="schalt1.php?text=<?php echo urlencode('Der Text der Schaltflächen'); ?>&font=4"></a>

Integrieren Sie die Schaltfläche auf diese Art, so wird sie den angehängten Text (hier: &quot;Der Text auf der Schaltfläche&quot;) anzeigen und dabei die Fontart Nummer 4 verwenden. Beachten Sie das Attribut border=0. Die meisten Browser legen automatisch einen Rahmen um eine Grafik, wenn sie als Hyperlink eingesetzt wird. Mit border="0" wehren Sie sich gegen dieses Verfahren.

Der Programm-Code für eine variable Schaltfläche:

<?php
If(!$_GET['text']){$text = 'Beschriftung';}else{$text=urldecode($_GET['text']);}
If(!$_GET['randh'] OR $_GET['randh']<1){$randh = 3;} else {$randh = ceil($_GET['randh']);}
If(!$_GET['randv'] OR $_GET['randv']<1){$randv = 6;} else {$randv = ceil($_GET['randv']);}
If($_GET['font']!=1 AND $_GET['font']!=2 AND $_GET['font']!=3 AND $_GET['font']!=4 AND $_GET['font']!=5)
{$font = 5;}else{$font = $_GET['font'];}
$hochtext = imagefontheight($font);
$breittext = strlen($text) * imagefontwidth($font);
$hoch=$hochtext+$randh*2;
$breit=$breittext+$randv*2;
$image = imagecreate($breit,$hoch);
$farbe_body=imagecolorallocate($image,210,210,210);
$schwarz=imagecolorallocate($image,0,0,0);
$blau=imagecolorallocate($image,100,100,255);
imagefill ($image, 0, 0, $farbe_body);
imagerectangle($image, 0, 0, $breit-1, $hoch-1, $schwarz);
imagestring($image, $font, $randv-1, $randh-1, $text, $blau);
header("Content-Type: image/gif");
imagegif($image);
imagedestroy($image);
?>

Erläuterung des Scripts

Zunächst setzen Sie die benötigten Variablen auf Standardwerte, falls keine oder auch unzulässige Werte per URL übergeben wurden. Im Einzelnen steuern die Variablen die folgenden Eigenschaften der Grafik:

    $text: Der Text, der auf der Schaltfläche angezeigt werden soll.
    $randh: Der horizontale Rand oben und unten um den Text. Dieser Wert muss größer als 1 sein, damit das ein Pixel breite Rechteck noch um den Text gelegt werden kann. Wird ein Wert übergeben, wird er, falls keine ganze Zahl vorliegt, aufgerundet.
    $randv: Der vertikale Rand links und rechts vom Text. Auch dieser Wert muss größer 1 sein und wird gegebenenfalls aufgerundet.
    $font: Die Art der zu verwendenden Schriftart. PHP liefert fünf interne Schriftarten mit, die mit den Werten 1-5 angesprochen werden. Wird keiner dieser Werte übergeben, verwendet PHP einfach die Standardschriftart.

If(!$_GET['text']){$text = 'Beschriftung';}else{$text=urldecode($_GET['text']);}
If(!$_GET['randh'] OR $_GET['randh']<1){$randh = 3;} else {$randh = ceil($_GET['randh']);}
If(!$_GET['randv'] OR $_GET['randv']<1){$randv = 6;} else {$randv = ceil($_GET['randv']);}
If($_GET['font']!=1 AND $_GET['font']!=2 AND $_GET['font']!=3 AND $_GET['font']!=4 AND $_GET['font']!=5)
{$font = 5;}else{$font = $_GET['font'];}

Die Höhe der Schriftarten variiert. Um die Höhe der verwendeten Schriftart zu ermitteln, damit daraus die gesamte Höhe der Grafik berechnet werden kann, steht der Befehl imagefontheight() parat. Er gibt die Höhe der Schriftart in Pixeln zurück.

$hochtext = imagefontheight($font);

Um die Breite des Textes zu berechnen - daraus wird die Gesamtbreite der Grafik ermittelt - multiplizieren wir die Anzahl der Buchstaben, die der Befehl strlen($text) zurückgibt, mit der Breite eines einzelnen Buchstabens. Die Breite der Buchstaben in Pixeln gibt der Befehl imagefontwidth() zurück.

$breittext = strlen($text) * imagefontwidth($font);

Die gesamte Höhe und Breite der Grafik berechnet sich also aus der Höhe und Breite des Textes. Wir addieren noch jeweils den Rand hinzu. Der Rand wird mit zwei multipliziert, da er auf beiden Seiten (links und rechts sowie oben und unten) hinzugefügt werden soll.

$hoch=$hochtext+$randh*2;
$breit=$breittext+$randv*2;

Nachdem die benötigte Breite und Höhe für die Grafik berechnet wurden, kommt imagecreate() zum Einsatz: die Grafik wird nun mit diesen Werten als Rohbild erstellt.

$image = imagecreate($breit,$hoch);

Dann folgt die Definition der für die Grafik benötigten Farben. Anschließend wird die Grafik mit der gewünschten Hintergrundfarbe ausgefüllt.

$farbe_body=imagecolorallocate($image,210,210,210);
$schwarz=imagecolorallocate($image,0,0,0);
$blau=imagecolorallocate($image,100,100,255);
imagefill ($image, 0, 0, $farbe_body);

Den schwarzen Rand um die Schaltfläche erzeugen wir mit einem nicht gefüllten Rechteck. Die Eckpunkte des Rechtecks sind 0,0 und $breit-1, $hoch-1. Sie müssen von der Höhe und Breite jeweils eins abziehen, da die Pixel der Grafik bei Null beginnend durchnummeriert werden. Haben Sie eine Grafik mit einer Breite von 300 Pixeln erstellt, sprechen Sie das erste Pixel in X-Richtung mit 0 an, entsprechend ist das letzte Pixel 299 (300-1).

imagerectangle($image, 0, 0, $breit-1, $hoch-1, $schwarz);

Die Beschriftung wird mit dem Befehl imagestring() auf die Grafik geschrieben. Dieser Befehl erwartet als Argumente neben dem Handle auf die Grafik und der Farbe die Schriftart ($font) und den Text ($text), der jeweils erzeugt werden soll. Die Position wird über die linke obere Ecke des Schriftbereichs festgelegt. Diese Position geben Sie mit Hilfe der X- und Y-Koordinaten an. Im Beispiel soll die Schrift entsprechend der Randangaben platziert werden. Auch hier ist eins abzuziehen, da die Pixel/Koordinaten bei 0 beginnen.

imagestring($image, $font, $randv-1, $randh-1, $text, $blau);

Abschließend wird der Header und das Bild an den Browser gesendet. Dann können Sie das Bild zerstören und den Speicher, den das Bild belegt hat, freigeben. Sollte Ihre PHP-Installation keine Gifs unterstützen, verwenden Sie ein anderes Dateiformat, z.B. JPG. Passen Sie in dem Fall die nachfolgenden Zeilen entsprechend an.

header("Content-Type: image/gif");
imagegif($image);
imagedestroy($image);

© Copyright 2005 by Christine Peyton , Andre Möller


Buch Magnum
 
 
Buch Delfine

Ein paar Links:

Ihr Link hier?