Kommentare zu: Wums! Zack! Bang! http://floffimedia.de/blog/wums-zack-bang/ Geschmack für alle Lebenslagen. Tue, 07 Feb 2012 20:36:39 +0000 hourly 1 http://wordpress.org/?v=3.3.1 Von: [Wordpress & Blogs] WUMSt euren Blog! | zHome http://floffimedia.de/blog/wums-zack-bang/#comment-458 [Wordpress & Blogs] WUMSt euren Blog! | zHome Sat, 06 Jun 2009 19:15:19 +0000 http://floffimedia.de/?p=782#comment-458 [...] an Florian der sich aufgemacht hat hier noch ein paar Verbesserungen zu [...] [...] an Florian der sich aufgemacht hat hier noch ein paar Verbesserungen zu [...]

]]> Von: Florian http://floffimedia.de/blog/wums-zack-bang/#comment-2902 Florian Wed, 03 Jun 2009 11:08:45 +0000 http://floffimedia.de/?p=782#comment-2902 Oho - ganz frech in die <em>linke</em> Ecke! Auch schick! Oho – ganz frech in die linke Ecke! Auch schick!

]]> Von: Till http://floffimedia.de/blog/wums-zack-bang/#comment-444 Till Wed, 03 Jun 2009 10:00:01 +0000 http://floffimedia.de/?p=782#comment-444 Elegant - und eleegant genug, dass ich's jetzt auch in mein Blog reingebastelt habe. Elegant – und eleegant genug, dass ich’s jetzt auch in mein Blog reingebastelt habe.

]]> Von: Florian http://floffimedia.de/blog/wums-zack-bang/#comment-440 Florian Tue, 02 Jun 2009 15:40:34 +0000 http://floffimedia.de/?p=782#comment-440 @<a href="#comment-438" rel="nofollow">Zettt</a>: <blockquote>Opera ist aber auch nicht WebKit basiert sondern benutzt seine eigene Rendering Engine.</blockquote> Wahnsinn, das wusste ich noch gar nicht! Schande über mein Haupt! @Zettt:

Opera ist aber auch nicht WebKit basiert sondern benutzt seine eigene Rendering Engine.

Wahnsinn, das wusste ich noch gar nicht! Schande über mein Haupt!

]]> Von: Florian http://floffimedia.de/blog/wums-zack-bang/#comment-439 Florian Tue, 02 Jun 2009 15:36:42 +0000 http://floffimedia.de/?p=782#comment-439 Natürlich darftst du, sollst du sogar :) Natürlich darftst du, sollst du sogar :)

]]> Von: Zettt http://floffimedia.de/blog/wums-zack-bang/#comment-438 Zettt Tue, 02 Jun 2009 15:34:23 +0000 http://floffimedia.de/?p=782#comment-438 @<a href="#comment-435" rel="nofollow">Florian</a>: 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? @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?

]]> Von: Florian http://floffimedia.de/blog/wums-zack-bang/#comment-437 Florian Tue, 02 Jun 2009 15:03:32 +0000 http://floffimedia.de/?p=782#comment-437 Vielen Dank! Ich verwende jetzt die geniale Sprite-Methode. Funktioniert übrigens in allen Browsern! Dann werde ich mal schnell den Post ändern... Vielen Dank! Ich verwende jetzt die geniale Sprite-Methode. Funktioniert übrigens in allen Browsern! Dann werde ich mal schnell den Post ändern…

]]> Von: Kleingeist http://floffimedia.de/blog/wums-zack-bang/#comment-436 Kleingeist Tue, 02 Jun 2009 13:54:15 +0000 http://floffimedia.de/?p=782#comment-436 He also mir gefällt die css hover Lösung wirklich ganz gut. Ist schön simple. 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 :( bzw. ein kurzes flickern. 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: <code>a.wums_feld { position: absolute; top: 0; right: 0; background: transparent url(wums_sprite.png) 0 0 no-repeat; width: 210px; height: 92px; }</code> <code>a.wums_feld:hover { position: absolute; top: 0; right: 0; background: transparent url(wums_sprite.png) 0 -92px no-repeat; width: 440px; height: 610px; }</code> 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ß He also mir gefällt die css hover Lösung wirklich ganz gut. Ist schön simple.
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 :( bzw. ein kurzes flickern.

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ß

]]> Von: Florian http://floffimedia.de/blog/wums-zack-bang/#comment-435 Florian Tue, 02 Jun 2009 12:12:04 +0000 http://floffimedia.de/?p=782#comment-435 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. 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.

]]> Von: Zettt http://floffimedia.de/blog/wums-zack-bang/#comment-434 Zettt Tue, 02 Jun 2009 12:02:50 +0000 http://floffimedia.de/?p=782#comment-434 Bei WebKit Browsern hattest du Probleme? Ich habe das Ding im Test mit Safari erstellt... Bei WebKit Browsern hattest du Probleme? Ich habe das Ding im Test mit Safari erstellt…

]]>