javascript

Symbole bei Links mit CSS

Rob Blake

CASCADING STYLESHEETS 3
Symbole für Text-Links

Oft sind Links auf andere Websites mit kleinen Symbolen gekennzeichnet. So erkennen die Besucher sofort, ob beim nächsten Mausklick eine externe Seite oder beispielsweise ein PDF-Dokument erscheint. Dieser Service ist arbeitsaufwendig, wenn Sie sämtliche Grafiken von Hand in Ihre Seiten einfügen.

Es geht auch einfacher: Nutzen Sie eine Formatierung des neuen, aber noch nicht verabschiedeten Standards CSS 3.

Ein einziger Befehl genügt, um externe Links einheitlich hervorzuheben:

a[href = “http”]:before {
content:url(extern.gif);
margin-right:5px; }

Sie formatieren damit alle Links, deren Parameter href mit http beginnt. Die Grafik extern.gif wird jedem dieser Links mit einem Abstand von fünf Pixel vorangestellt (Bild A).

Für PDF-Dateien eignet sich folgendes Format:

a[href = “.pdf”]:before {
content:url(‘pdf.gif’);
margin-right:5px; }

Damit prüfen Sie, ob die Zeichenkette bei href auf .pdf endet. Bei Firefox funktionieren diese Attributselektoren bereits problemlos. Und auch der Internet Explorer 7 wird sie unterstützen.

Symbole für Links (css)

CSS 3: Wenige Code-Zeilen reichen aus, um externe Links mit Symbolen zu kennzeichnen (Bild A)

Source: COM! 8/2006

Javascript Textbox dynamisch verändern

Rob Blake

JAVASCRIPT
Dynamische Textfeldgröße

Mehrzeilige Formularfelder dienen dazu, dass die Surfer Nachrichten, Kommentare oder Anmerkungen eingeben. In den kleinen Feldern ist jedoch fast immer nur ein kurzer Text vollständig zu sehen. Wer mehr eingeben möchte, muss scrollen.

Wenn Sie Besuchern mehr Komfort bieten wollen, dann versehen Sie die Felder mit kleinen Pfeiltasten, über die sie die Größe selbst individuell und vor allem dynamisch einstellen (Bild D).

So geht’s: Benennen Sie das Textfeld nach dem folgenden Muster mit dem id-Parameter:

<textarea cols=" 50" rows=" 5" id="meinung"></textarea>

Fügen Sie unterhalb des Feldes mit folgenden Zeilen zwei Mini-Symbole ein:

<a href=" # " onClick="weniger()"><img src="up.gif" width="16" height="16" border="0"></a><br>
<a href=" # " onClick="mehr()"><img src="dcnqn.gif" width="16" height="16" border="0"></a>

Die Grafik „up.gif” zeigt einen nach oben weisenden Pfeil, die Grafik „down.gif” einen nach unten gerichteten. Klicken die Besucher auf „up.gif”, so wird die Funktion weniger() aufgerufen, klicken sie auf „down.gif”, so startet die Routine mehr(). Schreiben Sie die folgenden Skriptzeilen in den <head>-Bereich der Seite:

script type="text/javascript">
<!--
function mehr() {
  document.getElementById("meinung").rows += 5;
}
function weniger() {
  if (document.getElementById("meinung").rows > 5)
    document.getElementById("meinung").rows -= 5;
}
Javascript Textbox

Komfortables Textfeld: Ihre Besucher passen bei Bedarf die Größe von mehrzeiligen Textfeldern einfach selbst an (Bild D)

Source: COM! 6/2006

Source für ICONs: www.interfacelift.com