 Weihnachts-Mauszeiger
Für die ganz normalen Textlinks in Ihrer Kalenderdatei (Fenster schließen, zurück zur Homepage) aber auch für andere Links können Sie statt des üblichen Mauszeigers einen weihnachtlichen Mauszeiger bestimmen.
|
|
eigene Mauszeiger für den Kalender
Für die 24 Links in den Kalendern kann mit CSS ein eigener Mauszeiger festgelegt werden.
 Demo für den Adventskalender 06 ansehen 
Animierte Mauszeiger sind weniger empfehlenswert bei Adventskalendern, die bei MouseOver bereits solche PopUp-Kästchen einblenden.
|
|
Für alle anderen Textlinks innerhalb Ihres Kalenders (z.B. zurück, schließen, Home), auch innerhalb der Tagesdateien, ist diese Funktion allerdings einsetzbar. Bewegen Sie den Mauszeiger über die Textlinks:
Textlink
Textlink
Textlink
Textlink
Textlink
|
|
Allgemeines - eigene Mauszeiger mit CSS
Hinweis: Man kann unterschiedliche Grafik-Typen (Gif, ANI, CUR) als Cursor bestimmen. Aber nicht jeder Browser kann alle Cursor-Grafiken anzeigen. Auf der sicheren Seite sind Sie mit einer Grafik vom Typ 'CUR', die im IE, Firefox, Safari und Google Chrome angezeigt wird.
 Mehr Info zum Thema eigene Cursor
|
Testen Sie ihren Browser hier, Standard Curser =
|
|
Nutzen Sie also eine Grafik vom Typ 'CUR', die im IE, Firefox, Safari und Google Chrome angezeigt wird.
Weihnachts-Cursor mit CSS
Zum Testen Mauszeiger über den Text bewegen
1 Mauszeiger für alle Links innerhalb der Seite
Die Dateien für den Mauszeiger wurden herunter geladen und im gleichen Verzeichnis abgespeichert. Im Head-Bereich werden folgende CSS-Anweisungen eingetragen.
<style type="text/css">
<!--
a {
font-size: 11px;
text-decoration: none;
color: #A5AEF9;
cursor:url(weihnacht04.cur),pointer;
}
a:visited {
color: #A5AEF9;
cursor:url(weihnacht04.cur),pointer;
}
a:hover {
color: #FFFF00;
cursor:url(weihnacht04.cur),pointer;
}
-->
</style>
2 Mauszeiger für bestimmte Links (eigene Klasse)
Die Datei für den Mauszeiger wurde herunter geladen und abgespeichert. Die Anweisungen gelten nur für Links einer festgelegten Klasse. Hier ein Beispiel für Links der Klasse 'zahl':
<style type="text/css">
<!--
.zahl {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #FFFFFF;
font-weight: bold;
cursor:url(weihnacht04.cur),pointer;
}
.zahl:visited {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #BFBFBF;
font-weight: bold;
cursor:url(weihnacht04.cur),pointer;
}
.zahl:hover {
font-family: Verdana,Arial,Helvetica,Sans-serif;
font-size: 28px;
color: #FF0000;
font-weight: bold;
cursor:url(weihnacht04.cur),pointer;
}
-->
</style>
Im Link wird die Klasse als Attribut eingetragen:
<a class="zahl" href=" ...
3 Mauszeiger inline festlegen (für einen Link)
Die Datei für den Mauszeiger wurde herunter geladen und abgespeichert.
Dazu tragen Sie die CSS-Anweisungen direkt im Link ein:
<a style="cursor:url(weihnacht02.cur),pointer;" href=" ...
|
Home • Adventskalender • Weihnachts-Mauszeiger
