Wums! Zack! Bang!
Wie ihr wohl kaum übersehen haben dürftet, besitzt mein Blog bis zum 7. Juni auch eines dieser fiesen “Pagepeels“, das euch immer “anspringt”, wenn ihr einmal in die Versuchung kommen solltet, mit der Maus darüber zu fahren. In diesem Fall finde ich den Einsatz absolut gerechtfertigt, da alle Unentschlossenen unbedingt noch dazu bewegt werden müssen, am 7. Juni grün zu wählen.
Wie ihr vielleicht mitbekommen habt, benutze ich jetzt eine neuere Version des Pagepeels, da die alte in Opera und dem IE nicht funktioniert hat. Freddie hat mir ein bisschen geholfen, danke! Außerdem vielen Dank an den Kleingeist, der mir in den Kommentaren die Sprite-Methode vorgestellt hat, die ich nun auch verwende. Es folgt eine Anleitung, wie ihr das Eselsohr in eure Website/Blog einbinden könnt.
In die eigene Seite einbinden
Diesen Codeabschnitt kopiert ihr am besten ganz ans Ende eures Stylesheets, das meistens style.css heißt und sich bei WordPress beispielsweise im Themeordner befindet.
a.wums_feld {
position: absolute;
top: 0;
right: 0;
background: transparent url(Wums-Sprite.png) 0 0 no-repeat;
width: 210px;
height: 92px;
}
a.wums_feld:hover {
position: absolute;
top: 0;
right: 0;
background: transparent url(Wums-Sprite.png) 0 -92px no-repeat;
width: 440px;
height: 610px;
}
So, fast geschafft. Jetzt müsst ihr noch das Bild auf euren Webspace hochladen (tut mir leid, ich möchte es meinem Server nicht antun, dass ihr das Bild alle von ihm holt), und zwar in das Verzeichnis, in dem sich auch die style.css befindet. Hier kommt der Link.
Bitte die Bilddatei nicht umbenennnen, sonst müsst ihr auch den Pfad in der style.css ändern. Zum Schluss kopiert ihr noch diese kleine Zeile an den Anfang eures <body> (bei WordPress z.B. in der header.php). Wenn ihr nicht gleich die richtige Stelle erwischt, müsst ihr einfach ein wenig experimentieren.
<a href="http://gruene.de" class="wums_feld" title="Bündnis 90/DIE GRÜNEN" target="_blank"></a>
Fertig!