HTML und XHTML

Bilder und Grafiken

grafische Links

Nichts spricht dagegen, dass man auch ein Bild anklicken kann, um zu einer andern Seite zu gelangen. Wahrscheinlich hast du das schon tausend Mal angetroffen, nur fällt das gar nicht besonders auf, wenn das Bild lediglich einen Text zeigt. (Das ist eine Technik, die häufig verwendet wird: Menüpunkte, die als Abbildung statt als Schrift geliefert werden, sehen natürlich weltweit genau gleich aus. Früher haben sie die Seite spürbar verlangsamt (Bilder sind viel umfangreicher als Text), aber unterdessen sind Leitungen und Computer so leistungsfähig, dass das keine Rolle mehr spielt.)

Ein konkretes Beispiel taucht in diesem Kurs immer wieder auf: die Kamera, die einen Schnappschuss der aktuellen Resultate symbolisiert, ist genau so ein grafischer Link.

Wie wird das nun realisiert?

Nun, eigentlich gibt's hier gar nichts Neues zu berichten. Ein Link hat ja - allgemein gesprochen - folgenden Aufbau:

<a href="Linkadresse">das, was man anklicken kann</a>

Das, was man anklicken kann, kann ein Text sein (wie bisher), aber es geht auch mit einem <img>-Element.

Übung 25

Füge nun am Ende der Rezeptseite rezepte/index.html, unmittelbar vor dem End-Tag des <body>-Elementes, das Bild images/dekoration/home.png ein, und zwar als Link, so dass man auf die Startseite kommt, wenn man es anklickt.

Scheint auf den ersten Blick vielleicht etwas viel aufs Mal zu sein, aber es setzt sich aus lauter bekannten Bausteinen zusammen, ist also fast ein wenig wie mit Lego zu spielen. Zunächst stellen wir dort einfach mal das Bild hin:

<img src="../images/dekoration/home.png" /> </body> </html>

Nun erscheint das Bild, funktioniert aber noch nicht als Link. Dazu fassen wir es in ein <a>-Element ein:

<a href="../index.html"><img src="../images/dekoration/home.png" /></a> </body> </html>

...und das war's dann schon. Du kannst es ausprobieren, wenn du willst.

Homepapa
März 2004

Vorheriger Abschnitt:
das IMG-Element

Nächster Abschnitt:
Ergänzungen