Image als Verweis
    
 Home • Verweise • Texte einblenden  

  Randfarbe für Image-Links

Dient eine Grafik als Verweisfläche und Sie belnden für diese Grafik einen Rand ein (border="1"), dann erscheint dieser Rand in der Farbe für Links, die im Body-Tag festgelegt sind (browserabhängig).
Randfarbe für Grafiken die als Link dienen

Der übliche Text-Verweis sieht so aus: 
<a href="datei.htm"> dazwischen steht der Text </a>
Grafik-Verweis

Möchten Sie nun statt des Textes ein Bild anklicken können, wird der Verweistext durch eine Grafik ersetzt. Das bedeutet: Das HTML-Tag für die Grafik wird zwischen das einleitende und schließende a-Tag gesetzt. Nun ist das Bild eine Verweisfläche zum Anklicken. 		Grafik als Verweisfläche 
<a href="datei.htm"> dazwischen steht die Grafik </a>

<a href="datei.htm">
<img src="b-weiter.gif" width="115" height="21" border="0" alt="">
</a>
Das wäre das Ergebnis:
  (Image ist nun ein Verweis)



   Grafik mit Rand

Manchmal, besonders bei Fotos, wird der Rand für Grafiken wegen des besseren Kontrasts zum Hintergrund auf 1 Pixel Breite gesetzt (border="1"). Der Rand soll dann in schwarz oder anthrazit dargestellt werden.

Wird im Image-Tag zur Einbindung der Grafik
  • das Attribut für den Rand nicht auf 0 (Null) gesetzt
  • das Attribut für den Rand z.B. auf 1 gesetzt (border="1")
  • oder kein Attribut 'border' eingetragen
bekommt das Bild einen farbigen Rand. In welcher Farbe? 		Grafik als Verweisfläche 

<a href="datei.htm">
<img src="foto.jpg" width="200" height="150" border="4" alt="">
</a>
Ohne weiteres Zutun (siehe oben) erscheint der Rand u.U. in den Farben, die im Body-Tag des HTML-Dokuments für Links festgelegt wurden. In manchen Browsern auch dann, wenn Sie für Textlinks mit CSS-Angaben die farbe Schwarz festgelegt hatten. 
<body link="#0090E0" vlink="#0090E0" alink="#FF007F"

<a href="datei.htm">
<img src="b-weiter.gif" width="115" height="21" border="1" alt="">
</a>



   Randfarbe bestimmen

Sie können also die Farbe des Bildrandes mit den Attiubuten im Body-Tag festlegen. Dazu werden die gewünschten Farbwerte z.B. für Schwarz eingetragen ('black' oder hexadezimal '#000000' bzw #000).

<body link="#000000" vlink="#000000" alink="#FF007F"

Das ist schon mal eine erste Lösung funktioniert aber in NS4.x nicht, wenn für Textlinks mit CSS-Angaben eine andere Linkfarbe festgelegt wurde.




   Lösung für beide Browser:

Diese Lösung ist veraltet, wenn sie das auf die bloße Randfarbe beziehen. Immer noch gültig aber: Wenn sie durch die Randfarbe einen Link als
  • bereits besuchten Link andersfarbig kennzeichnen möchten
  • den MoseOver-Effekt sichtbar machen möchten



 Abhilfe (Explorer) durch Bestimmung der Linkfarben im Body mit Schwarz.
<body alink="#000000" vlink="#000000" link="#000000" ...

Abhilfe (Netscape) durch Bestimmung einer Unterklasse ".schwarz" . Für die Bildlinks richten Sie mit CSS eine Unterklasse mit der gewünschten Farbe Schwarz ein und geben dem Bildink diese Unterklasse.
 
 Für die üblichen Textlinks richten Sie ganz trickreich mit CSS eine Unterklasse mit der gewünschten Farbe ein und geben dem Text-Link diese Unterklasse. (Siehe Kasten unten)


eigene CSS-Klasse für Grafiken

Beispiel Formatierung der Grafik-Links mit CSS: Unterklasse "imglink" im Head: 
<style type="text/css">
<!--

a.imglink {color:#000000;}
a.imglink:visited {color:#000000;}
a.imglink:hover {color:#FF7300;}

-->
</style>
im Body: 
<a class="imglink" href="datei.htm">
<img src="symbol-01.gif" width="150" height="113" border="2" alt="">
</a>








   Nicht verzweifeln!

Es gibt allerdings immer noch Überschneidungen (in den Browsern unterschiedlich angezeigt) bei Kombinationen der Anweisungen von
  • eigenen CSS-Klassen für Links
  • eigenen CSS-Klassen für Image-Rändern
  • den Farbangaben für Links im BODY-Tag
  • der JavaScript-Anweisung 'onfocus="if(this.blur)this.blur()"'

Bildrandfarbe mit CSS
punktierter Rahmen bei Links (aktivLink / OnFocus)