 Farbiger Rand um Image-Verweise
Dient ein Image als Verweisfläche (Link) und wird mit einen Rand angezeigt, entspricht die Randfarbe nicht immer ihren Vorstellungen und ist von Browser zu Browser sogar unterschiedlich.
|
Die Bildrandfarbe entspricht in einigen Browsern (z.B. ältere IE) den Farben für Links, die im Body-Tag festgelegt wurden, unabhängig von CSS-Notierungen für Verweise. In anderen Browsern (z.B. FF) erscheint der Rand in der Farbe, die mittels CSS-Angaben für Textlinks festgelegt wurden. Eine uneinheitliche Darstellung, die wir nicht möchten. |
 Basiswissen Grafik als Verweis
Beispiel
Farbangaben für Verweise im Body-Tag: Links (link) = rot, besuchter Link (vlink) = grün
<body link="#FF0000" vlink="#00FF00" ... >
Sie haben als Verweisfläche für einen Link ein Image eingefügt. Das Image hat einen Rand von 1 Pixel durch das Attribut border="1".
<img src="bild.jpg" width="120" height="90" border="1" alt="">
|
|
Links sehen sie die Grafik als Verweisfläche (Link).
Der Rand wird (in einigen Browsern) in der Farbe angezeigt, die im Body-Tag für Links festgelegt wurde. Abhängig vom Status (noch nie angeklicht oder beim letzten Seitenbesuch bereits angeklickt) entweder als roten oder grünen Rand (ältere IE).
|
Andere Browser zeigen den Rand in der Farbe, die mittels CSS für Textlinks festgelegt wurden. Wenn sie z.B. den FF nutzen, sollte die Randfarbe in einem Blauton zu sehen sein.
Ihr Ziel
Ein Image als Verweis sollte einen schwarzen Rand haben! Für Texlinks haben sie die Farben mittels CSS-Angaben auf blau eingestellt mit:
<style type="text/css">
<!--
a
{
text-decoration: none;
font-size:12px;
color:#0000FF;
}
a:visited
{
color:#0000FF;
}
a:hover
{
color:#FF0000;
}
-->
</style>
Im Body-Tag stzten sie die Attribute für Linkfarben auf schwarz mit:
<body link="#000000" vlink="#000000" ... >
Doch diese Notierungen zeigen nicht in jedem Browser das erwünschte Ergebnis. Die Randfarbe ihrer Verweisgrafik entspricht immer noch
- in einigen Browsern schwarz
- in anderen Browsern den Farben für Text-Links
Abhilfe
Abhilfe schafft eine eigene CSS-Klasse für Grafiken, die als Verweis dienen.
Im Headbereich notieren sie eine Unterklasse für Image-Tags und legen die Formatierung für den Rand mit Breite 1 Pixel, Linienart durchgehend (solid) und Farbe schwarz fest. Diese Randfoematierung soll für Links und bereits besuchte Links (visited) gelten.
Durch die Notierung einer CSS-Unterklasse für Images (img.Unterklassenname) , werden nicht grundsätzlich alle Grafiken einen Rand erhalten sondern nur diejenigen, für die das Attribut class="rand" eingetragen wurde.
Im Head-Bereich: Notierung der CSS-Angaben für die Unterklasse "rand"
<style type="text/css">
<!--
img.rand
{
border:1px solid #000000;
}
img.rand:visited
{
border:1px solid #000000;
}
-->
</style>
Im Body-Bereich Grafik als Verweis mit Einbindung der Unterklasse "rand"
<a href="datei.htm">
<img class="rand" src="grafik.jpg" width="120" height="90" border="0" ...
</a>
|
|
Der Rand wird nun in allen Browsern in der Farbe angezeigt, die mittels CSS für die Unterkklasse "rand" festgelegt wurde. Da für beide Fälle (noch nie angeklickt oder beim letzten Seitenbesuch bereits angeklickt) gleiche Farbangaben (schwarz) gemacht wurden, immer in schwarz.
|
Farben für die beiden Zustände könnten sie natürlich auch farblich abweichend festlegen, um bereits angeklickte Verweise kenntlich zu machen.
Zusätzliche Unterklassen
Sollte der Bedarf bestehen, einige Grafiken mit anders formatierten Rändern zu versehen, notieren sie gegebenenfalls weitere Unterklassen mit entsprechenden Anweisungen.
Im Beispiel hier Randformatierungen, die nicht nur für Images eingesetzt werden können ('bild' ist nicht Unterklasse von 'img').
<style type="text/css">
<!--
.bild
{
border:8px ridge #0090E0;
}
.bild:visited
{
border:8px ridge #0090E0;
}
-->
</style>
Die Unterklasse 'bild' könnten sie also auch für Absätze oder Tabellen einsetzen
Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle.
<p style="padding:15px;" class="bild">Freilebende Gummibärchen gibt ... <p>
|
HOME
CSS-Notierung 
ZURÜCK