 Farbiger Rand um Grafik-Verweise
Dient eine Grafik 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.
|
|
Rand bei Grafiken als Verweisfläche / link
|
Die Bildrandfarbe entspricht in einigen Browsern den Farben für Links, die im Body-Tag festgelegt wurden, unabhängig von CSS-Notierungen für Verweise. In anderen Browsern 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 Absicht: Randfarbe (und Strichstärke) festlegen
Eine Grafik als Verweis sollte (wenn überhaupt) einen schwarzen Rand haben! Für Textlinks haben Sie die Farben mittels CSS-Angaben auf blau eingestellt mit:
<style type="text/css">
<!--
a:link, a:visited
{
text-decoration: none;
font-size: 12px;
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, 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. Die Klasse 'bild' ist nicht Unterklasse von 'img' .
<style type="text/css">
<!--
.bild, .bild:visited
{
border:8px ridge #0090E0;
}
-->
</style>
<a href="#">
<img class="bild" src="grafik.jpg" width="120" height="90" border="0" alt="">
</a>
mehrfach verwendbar
Die Unterklasse 'bild' könnten Sie also auch für Absätze oder Tabellen einsetzen
<p style="padding:15px;" class="bild">Freilebende Gummibärchen gibt ... <p>
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.
Unterschied
Nun setze ich die Klasse 'bild' nicht für die Grafik sondern für den Verweis ein. Das Attribut für die Klasse wird nun im a-Tag eingetragen. Die Grafik hat keinen Rand mehr, allerdings erhält die Verweisfläche für den Link (also doch die Grafik?) einen Rand. Außerdem notiere ich eine unterschiedliche Randfarbe für 'hover' die bei MouseOver sichtbar werden soll.
Na, das ging schief (Screenshot):
<style type="text/css">
<!--
.bild, .bild:visited
{
border:8px ridge #0090E0;
}
.bild:hover
{
border:8px ridge #FF007F;
}
-->
</style>
<a class="bild" href="#">
<img src="grafik.jpg" width="120" height="90" border="1" alt="">
</a>
So sieht das in Ihrem Browser aus: Bewegen Sie den Mauszeiger über die Grafik.
|
Home • CSS • Grafik Randfarbe
CSS-Notierung
drucken 