In diesem Tutorial zeige ich, wie mit einfacher Verwendung von JavaScript dem Benutzer das Verwenden von Smileys erleichtert wird.

Mit der Javascript-Bibliothek jQuery lässt sich ohne großen Aufwand eine einfache Ajax-Anwendung realisieren. Im folgenden gehe ich davon aus, dass in die aufgerufene Seite bereits das jQuery-Framework eingebunden wurde (hier kann das Einbinden nachgelesen werden). Dies ist notwendig, damit das nachfolgende Beispiel funktioniert.

Beispiel

Folgender Code wird in den head-Bereich der Homepage geschrieben: 

1
2
3
4
5
6
7
8
9

<script type="text/javascript">
<!--
function insert(tag) {
    document.form.comment.value +=" "+tag+" ";
    document.form.comment.focus();
}
//-->
</script>

Folgender Code wird im Body-Bereich der Homepage platziert: 

1
2
3
4
5
6
7
8
9

<form action="mail.php" method="post" name="form">
<fieldset><img style="border: 0px;" src="images/smiley1.gif" />
[...] <!-- Bitte hier die Verknüpfungen zu den Smileys einfügen -->
<img style="border: 0px;" src="images/smiley9.gif" />

<small>Smileys (Einfügen per Klick)</small>

<input type="submit" value="Button" /></fieldset>
</form>

Erklärung

Im head-Bereich wird der Code plaziert, der später für das Einfügen verantwortlich ist. Der Code wird per Klick auf das Bild aufgerufen (onclick="insert(':smile1:')"). Dadurch wird in das Kommentarfeld der Text :smiley1: mit jeweils einem Leerzeichen am Anfang und am Ende eingefügt.

Code durch Bilddatei ersetzen

1
2

<?php echo str_replace($smiley_code, $smiley_bild, $kommentar); ?>

Damit aus dem Code smiley1 wieder eine Bilddatei wird, muss natürlich ein Austausch vorgenommen werden. Es ist vorteilhaft, wenn die Variablen $smiley_code und $smiley_bild als Arrays definiert sind, damit Code eingespart werden kann. In der Variablen $smiley_code wird nun der Smiley-Code gespeichert, in der Variablen $smiley_bild der HTML-Code für die Bilddatei.

Was ist der Vorteil dieser Methode?

Durch diese Methode kann jeder Benutzer ohne weitere Kenntnisse Smileys verwenden. Desweiteren können die Bilddateien der Smileys ohne Probleme ausgetauscht werden, da ja nur ein Code im Kommentar gespeichert ist.

Demo