SELFHTML: HTML/XHTML / Grafiken / Grafiken als Verweise

SELFHTML/Navigationshilfen HTML/XHTML Grafiken
	Grafiken als Verweise
	Grafiken anstelle von Verweistext definieren

Grafiken anstelle von Verweistext definieren

Wenn Sie Verweise setzen, müssen Sie immer auch einen Verweistext definieren, also den Text, der dem Anwender als anklickbar dargestellt wird. Anstelle eines Verweistextes können Sie jedoch auch eine Grafikreferenz notieren. Dann ist die gesamte Grafik anklickbar, und beim Anklicken der Grafik wird der Verweis ausgeführt. Von dieser Möglichkeit wird in der Praxis sehr oft Gebrauch gemacht, bei Werbe-Bannern zum Beispiel, aber auch bei grafischen Navigationsleisten.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Grafiken anstelle von Verweistext definieren</title>
</head>
<body>

<h1>Navigationsleisten</h1>

<p>
  <a href="home.htm"><img src="button1.jpg" width="160" height="34" border="0" alt="Home"></a>
  <a href="seite.htm"><img src="button2.jpg" width="160" height="34" border="0" alt="zurück"></a>
  <a href="seite.htm"><img src="button3.jpg" width="160" height="34" border="0" alt="weiter"></a>
  <a href="thema.htm"><img src="button4.jpg" width="160" height="34" border="0" alt="THEMA"></a>
</p>

<p>Was w&auml;re das Web ohne sie!</p>

</body>
</html>

Erläuterung:

Das Beispiel zeigt eine horizontale Navigationsleiste. Die vier Buttons der Leiste liegen in Form der Grafiken button1.jpg bis button4.jpg vor. Alle Grafiken sind gleich groß und haben ein einheitliches Aussehen. Sie unterscheiden sich lediglich durch die Beschriftung. Damit die Buttons sauber nebeneinanderliegen und nicht umbrochen werden können, wird eine blinde Tabelle (border="0") dafür notiert. Mit cellpadding="0" und cellspacing="0" wird in der Tabelle dafür gesorgt, dass die Zellen nahtlos aneinanderliegen und keinen Innenabstand haben. So grenzen die darin enthaltenen Grafiken nahtlos aneinander und erzeugen den Effekt einer Leiste.

Definiert wird eine Zeile mit vier Zellen. In jeder der Zellen wird ein Verweis notiert. Zwischen <a href=> und </a> wird jedoch kein Verweistext notiert, sondern die Grafikreferenz für je einen der Buttons. Auf diese Weise wird die jeweilige Grafik anklickbar und führt beim Anklicken zu dem Ziel, das in href notiert ist.

Wichtig ist auch die Angabe border="0" in den Grafikreferenzen (siehe auch Rahmen um Grafiken). Würde diese Angabe fehlen, dann würde der Browser einen Rahmen um die Grafik anzeigen, und zwar in der Farbe für Verweise, um diese als Verweis zu kennzeichnen. Da die Buttons im Beispiel aber für den Anwender eindeutig als Grafiken mit Verweis-Funktion identifizierbar sind, wird der Rahmen unterdrückt.

Beachten Sie:

Wenn Sie mit border="0" den Rahmen um eine als Verweis dienende Grafik unterdrücken, kann der Anwender die Grafik nicht mehr unmittelbar als Verweis erkennen. Nur wenn er mit dem Mauszeiger über die Grafik fährt, kann er an dem Mauszeigersymbol erkennen, dass es sich um einen Verweis handelt. Deshalb sollten Sie den verweiskennzeichnenden Rahmen nur dann unterdrücken, wenn die Grafik auf den ersten Blick als Verweis erkennbar ist.

Wegen der Angabe border="0" benutzt das obige Beispiel die HTML-Variante Transitional, denn das border-Attribut ist im HTML-Standard als deprecated gekennzeichnet. Mit einem zentralen CSS-Format img { border:none } wäre dieses Problem allerdings elegant zu umgehen, und in allen <img>-Tags innerhalb von Verweisen könnte auf das border-Attribut verzichtet werden. Bei nicht CSS-fähigen Browsern würde dann aber doch der Rahmen angezeigt.

Nur zum Verständnis: am obigen Anzeigebeispiel sind in Wirklichkeit vier Dateien beteiligt, die alle den gleichen Aufbau und immer an der gleichen Stelle die Navigationsleiste haben. Nur sind die anklickbaren Grafiken in jeder der Dateien mit unterschiedlichen Verweiszielen verknüpft. Damit zeigt das Beispiel, wie sich mit verschiedenen Dateien, die ein einheitliches Layout und die Navigationsleiste stets an der gleichen Stelle haben, ein in sich geschlossenes Web-Projekt realisieren lässt.


	Verweis-sensitive Grafiken (Image Maps)
	Grafiken ausrichten

SELFHTML/Navigationshilfen HTML/XHTML Grafiken

ok.gif" width="15" height="10" alt="Seite"> Impressum