Frage zu dieser Navi-Leiste

[Maxm123]

Es gibt auf der Seite http://www.cooliris.com/ ganz oben eine Navileiste und wenn ich über die einzelnen Buttons fahre werden immer nur die Stellen der Leiste verändert wo die Buttons sind obwohl es nur eine Grafik gibt in der Normal, Hover und Aktiv in einem sind.

http://www.cooliris.com/static/images/de_common_sprite.png

kann mir bitte einer erklären wie das geht? Ich kann es mir irgendwie nicht erklären.

Danke

 

[CPoly]

Das ganze nennt sich "css-sprites" und wird realisiert, indem alle a-Elemente in der Navigation als Hintergrundbild das von dir verlinkte Bild haben und es dann per background-position an die richtige Stelle rücken. Die Position wird dann entsprechend beim hovern verändert.

 

[Maik]

Moin,

Hintergrundinfos zur konkreten technischen Umsetzung der "CSS Sprites" kannst du hier nachlesen:

• CSS Sprites: Image Slicing’s Kiss of Death
• Hovereffekte mit CSS-Sprites

Diese Technik stelle ich auch in meinem Tutorial CSS-Rollover und CSS-Rollover - Teil 2 jeweils im Abschnitt "CSS-Rollover mit background-position" vor

mfg Maik