Links

HTML Link einfügen

Ein Link wird mit dem 'a href'-tag und einem Textverweis ins HTML-Dokument eingefügt.

<a href="www.webbasics.ch">Webbasics</a>
<a href="http://www.webbasics.ch/">Webbasics</a>

Ebenso können Bildern anstelle eines Textes mit dem zusätzlichen image source-tag verlinkt werden.

<a href="http://www.webbasics.ch/webgestaltung/links">
<img src="taste.jpg"></a>


CSS Pseudoklassen

Es gibt vier verschiedene Linkzustände (Pseudoklassen) welche unterschiedliche gestaltet werden können. Die Klassen werden im CSS eingefügt und mit den entsprechenden Eigenschaften und Werte (z.B. Color: red) versehen. Es ist bei der Auflistung immer die folgende Reihenfolge zu berücksichtigen:

a:link = normaler Hyperlink
a:visited = besuchter Hyperlink
a:hover = Mauszeiger befindet sich gerade über dem Hyperlink
a:active = beim Klick auf den Hyperlink


CSS Linkgestaltung / Tasten

Eine Webseite insbesondere die Navigation besteht aus Links, die auf weiterführende Webseiten/Unterseiten führen. Diese Links können unterschiedlich gestaltet werden, oft werden sie auch als Tasten dargestellt. Ausserdem verändern die Links oft bei Darüberfahren ihr Aussehen (sogenannter Mouseover-Effekt), um diesen noch deutlicher hervorzuheben. Mit dem neusten CSS-Standards werden die Links gestaltet:

- font, color, background-color
- border, border-radius, border-shadow
- CSS3 gradient, transform
- image

Tasten
Mit einem Rahmen bzw. Hintergrundfarbe wird bereits eine Tasten erzielt. Ferner wird der Link mit dem CSS-Befehl a:hover verändert und noch stärker betont:

<a href="www.webbasics.ch/webgestaltung/links/">Taste</a>
a:link { text-decoration: none; background-color: yellow; width: 100px; padding: 5px; text-align: center; border: 5px solid black; display: block; } a:hover { color: white; background-color: red; border: 5px solid white; }

Runde Tasten
Mit CSS3 sind ebenso abgerundete Tasten oder Kreistasten anhand des CSS-Befehls border-radius möglich:

a:link { text-decoration: none; background-color: yellow; width: 100px; padding: 10px; border-radius: 25px; text-align: center; border: 5px solid black; display: block; } a:hover { color: white; background-color: red; border: 5px solid white; }


CSS animierte Links

Animierte Tasten die sich entweder beim Darüberfahren (a:hover) oder Anklicken (a:active) bewegen:

a:link { text-decoration: none; width: 100px; height: 50px; display: block; text-align: center; line-height: 50px; background-color: yellow; } a:active { color: white; background-color: red; transform:translate(100px, 0px); }

CSS Box-Link / Klasse
Wenn nur ein Element, wie eine Box ohne Text, verlinkt werden soll, kann die anhand einer selbst gewählten Klasse (z.B. Klassenname plainbox) geschehen:

.plainbox a:link { text-decoration: none; width: 100px; height: 100px; background-color: yellow; display: block; } a:hover { background-color: red; }

<div class="plainbox">
<a href="http://www.webbasics.ch/webgestaltung/links/"></a>
</div>

CSS Info-Link mit Mouseover-Effekt
Link, der beim Darüberfahren seine Größe ändert oderan einer beliebigen Stelle der Seite einen zusätzlichen Informationstext einblendet.

CSS Overlay-Effekt

Um ein Bild mit Text oder anderem Bild zu überlagern, benötigt man zwei verschiedene HTML-Bereiche bzw. Klassen, einen für das Bild und einen für den Text. Das Bild wird angezeigt und der Text wird nur bei Mouseover angezeigt:
<div class="pic">
<div class="text">Der Tiger ist eine Raubkatze,
welche bis zu 300 Kilogramm schwer werden kann.
</div>
</div>

.pic { width: 400px; height: 217px; background: url(tigerbild.jpg) no-repeat; } .text { width: 400px; height: 217px; background: #FFF; opacity: 0; } .pic:hover .text { opacity:0.6; text-align: justify; color: #000000; font-size: 20px; font-family: helvetica; }


JS Randomlink einfügen

Mit einem Javascript können auch mehrere Zufallslinkziele (random) angegeben werden. Hierfür wird ein Skript mit allen gewünschten Links in den Headbereich notiert und im Bodybereich auf dieses Skript zugegriffen.

Im Head-Bereich das Skript einfügen (inkl. Links):

<script>
var randomlinks=new Array() //randomlinks mit aufsteigender Zahl plus Linksadresse einfügen randomlinks[0]="http://www.link1.com" randomlinks[1]="http://www.webbasics.ch" randomlinks[2]="http://www.hallo.eu" // falls man Link nicht in einem neuen Fenster möchte, // folgendes auswechseln: window.open(randomlinks durch window.location=randomlinks function randomlink(){ window.open(randomlinks[Math.floor(Math.random()*randomlinks.length)],''); }

</script>


Im Body-Bereich Link-Button mit Befehl einfügen:

<input type="button" value="clicken"  onclick="randomlink()">


Cursor

Es können verschiedene Elemente für das Aussehen des Mauszeigers definiert werden. Sobald die Maus über so ein Element fährt, verändert der Browser den Zeiger wie angegeben. Dies wird mit der Eigenschaft Cursor und einem entsprechenden Wert festgelegt.

Entweder wird dies einzeln beim jeweiligen Link direkt eingefügt, anhand eines 'style'-tags (Beispiel mit help-Fragezeichen):

<a href="www.webbasics.ch" style="cursor:help;">webbabsics</a>


Oder es wird für alle Links auf den Webseiten im body-Bereich des CSS festgelegt (Beispiel mit Fadenkreuz):

body { cursor: crosshair; }


Ebenso kann ein eigenes Bild als Mauszeiger gestaltet werden:

body{ cursor: url(Name.jpg), progress; }


Funktionen

Es gibt verschiedene Funktionen, welche das Durchforsten einer Seite erleichtern. Anhand von kleinen Skripten (z.B. Javascript) lassen sich die Befehle direkt in die HTML-Webseite integrieren.

Bei viel Text auf einer Seite ist es sehr hilfreich, einen Link oder Button zur Verfügung zu stellen, welcher wieder zurück zum Seitenanfang führt:

<a href="javascript:self.scrollTo(0,0);">Zurück zu Seitenanfang</a>


Bei Verlinkung verschiedener Seiten ist es nützlich, einen Link/Button für einen Schritt zurück auf die vorher geladene Seite anzubieten:

<a href="javascript:history.back()">Einen Schritt zurück</a>


Es gibt ferner die Möglichkeit beim Anklicken eines Verweises eine Dialogbox mit einem spezifischen Hinweis zu integrieren.

<a href="javascript:alert ('Bitte beim Absenden die Adresse nicht vergessen')">Tipp Absenden</a>

Vorherige Seite: Schriften Nächste Seite: Layout / Komposition