 Kalender 06 Modifikationen Ziffernfarben
Wenn Sie ein eigenes Foto eingebunden haben, möchten Sie möglicherweise die 24 Ziffern in einer anderen Farbe darstellen, damit diese gut zu erkennen sind. Wie das geht, lesen Sie hier.
|
|
Farbe der 24 Ziffern einstellen
Der Kalender 06 hat 24 Klickbereiche angezeigt durch Ziffern, die in einer Tabellenstruktur für den Betrachter vor dem Foto liegen. Bei MouseOver wird nicht nur die Fensterchennummer in einem PopUp angezeigt, sondern auch die Farbe der Ziffer verändert.
Vor allem die Farbe dieser Ziffern sollte in einem guten Kontrast zur verwendeten Hintergrundgrafik stehen. Das gilt für die Normalansicht (link) und auch für die Situation bei MouseOver (link:hover).
 Demo Ziffernfarben
|
|
Bei den angezeigten Ziffern handelt es sich um gewöhnliche Textlinks, welche über CSS-Angaben in Größe und Farbe festgelegt wurden. Ich habe diesen Textlinks die CSS-Klasse 'zahl' zugeordnet.
Sie können die Farben selbst festlegen und ändern dazu lediglich 3 Farbangaben: Zwei für normale und bereits besuchte Links und eine für die Farbe bei MouseOver.
Farbwerte eintragen (alle Ziffern)
Im Head-Bereich der Adventskalenderdatei, etwa bei Zeile 50 finden Sie diese Codezeilen:
Der erste Block bestimmt die Formatierung für normale und bereits besuchte Links, der zweite Block (zahl.hover) die Formatierung für MouseOver. Tragen Sie die gwünschten Farbwerte ein.
.zahl:link, .zahl:visited {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:28px;
color:#D54500;
font-weight: bold;
}
.zahl:hover {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:28px;
color:#000000;
font-weight:bold;
}
Farbwerte eintragen (bestimmte Ziffern)
Wenn es nicht ausreicht wenn sämtliche 24 Ziffern einheitlich dargestellt werden, könnten Sie einzelne Ziffern mit einer eigenen Farbvorgabe formatieren. Dazu müssten Sie, wollen Sie den Hover-Effekt nicht verlieren, eigene CSS-Klassen festlegen und für jede alternative Farbe einen zusätzlichen Block von CSS-Code notieren.
Der erste Block bestimmt die Formatierung für normale und bereits besuchte Links, der zweite Block (meineFarbe01.hover) die Formatierung für MouseOver. Tragen Sie die gwünschten Farbwerte ein.
.meineFarbe01:link, .meineFarbe01:visited {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:28px;
color:#FF7F00;
font-weight: bold;
}
.meineFarbe01:hover {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size:28px;
color:#9000E0;
font-weight:bold;
}
Den Links, die in der zusätzlich definierten Linkfarbe dargestellt werden sollen, ordnen Sie die CSS-Klasse zu. Hier in meinem Beispiel ist das die CSS-Klasse 'meineFarbe01', welche für die Ziffer 2 eingetragen wurde. Alle anderen Ziffern werden immer noch in der Standardfarbe dargestellt, da für sie die CSS-Klasse 'zahl' eingetragen ist.
<td><a class="zahl" href="javascript:s(15)">15</a></td>
<td><a class="meineFarbe01" href="javascript:s(2)">2</a></td>
<td><a class="zahl" href="javascript:s(14)">14</a></td>
<td><a class="zahl" href="javascript:s(13)">13</a></td>
...
|
Home • Adventskalender • Kalender 06 • Ziffernfarben