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!
Bei WebKit Browsern hattest du Probleme? Ich habe das Ding im Test mit Safari erstellt…
In der neuesten Version von Opera hat es jedenfalls nicht funktioniert. Auch dem IE6, den man ja leider immer noch als Standardbrowser auf den meisten PCs voraussetzen muss, hat das Banner nicht gefallen.
He also mir gefällt die css hover Lösung wirklich ganz gut. Ist schön simple.
bzw. ein kurzes flickern.
Aber leider hat es, zumindest bei meiner langsamen Verbindung, den unschönen Effekt, dass das große Hover Bild erst geladen wird, wenn die Maus darüber geht. Im Resultat habe ich einen kurzen Moment gar kein Bild da
Aber natürlich kann man auch dagegen was tun und CSS Sprites verwenden
Dazu werden einfach beide Bilder zusammengefügt (Beispiel: http://storage.ae35.de/2009/06/wums_sprite.png ) und per css positioniert:
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;
}
Habs leider nur im FF getestet, aber soweit ich es in Erinnerung hab, sollte das mit jedem Browser gut funktionieren. Wenn ihr Zeit habt und euch die Lösung gefällt testet es einfach mal aus.
Gruß
Vielen Dank! Ich verwende jetzt die geniale Sprite-Methode. Funktioniert übrigens in allen Browsern! Dann werde ich mal schnell den Post ändern…
@Florian: Verified mit Opera geht’s tatsaechlich nicht. Opera ist aber auch nicht WebKit basiert sondern benutzt seine eigene Rendering Engine. Werde mir wahrscheins deinen Code hier klauen. Darf ich?
Natürlich darftst du, sollst du sogar
@Zettt:
Wahnsinn, das wusste ich noch gar nicht! Schande über mein Haupt!
Elegant – und eleegant genug, dass ich’s jetzt auch in mein Blog reingebastelt habe.
Oho – ganz frech in die linke Ecke! Auch schick!
Trackback von [Wordpress & Blogs] WUMSt euren Blog! | zHome