Az image replacek az előnyös, és látványos css megoldások közé tartoznak. Mivel egyre többet használják öket, és egyre több oldalt, és sitebuildert érint a dolog, gondoltam előveszem egy kicsit a témát.
Igaz, már magyarul is született egy egész remek leírás a témáról, Tornado-nak köszönhetően a Cloneshit-en, azért mégis lenne egy-két kiegészítendő része a dolognak, és egyből kibővíteném egyéb lehetőségekkel, pl a felhasznált textúrával kapcsolatban, vagy annak tologatása kapcsán. A bejegyzés írása közben leltem meg a Szöveges menü képessé alakítása lépésről lépésre című remek leírást, ennek ellenére kifejtem a dolgot 
Az image replace egyben SEO barát, másrészt ha a gombok állapotait és eleve a gombokat magukat egy képre helyezzük, jelentősen csökkenthetjük a fileok számát, és preloadra se nagyon lesz szükség
Az alábbi példában a lehető legjobb megoldást fogom tálalni, egy footer esetére levetítve
FIR - FARHNER IMAGE REPLACEMENT
Ezt egy viszonylag egyszerű, egy, valamint több <a> és <span> tagból álló eltérő gomb szélességű menün mutatom be. Nézzük a html kódot:
<a id="menu-item2">Menu 2<span></span></a>...
A CSS kód részleteiben:
A footert tartalmazó doboz:
position: relative;
display: block;
width: auto;
height: 21px;
}
A footer <a> elemének definiálása (kötelező tulajdonságok: position, display:block, height, overflow)
position: relative;
display: block;
height: 21px;
overflow: hidden;
float:left;
}
Majd az <a> elemek méretét, szélességét egyenként megadjuk (hiszen a kép alapú gombok esetén, eltérő gomb szélesség van) - Ha absolute
helyezzük el az <a> tagokat is, akkor érdemes ebben a sorban megadni az elemek top, és left értékeit is!
a#menu-item2 { width: 71px; }
a#menu-item3 { width: 36px; }
A FIR lényege, hogy az <a> elemben hagyunk egy üres <span></span> elemet, ez lesz a kitakaró elem. Fontos, hogy a legfelső absolute pozíciónált elemet rendereli legfelülre a böngésző, ezért ezzel a spannal, 100% magasság és szélességet kell felvennünk, hogy teljes mértékben lefedje az <a> elemünk text szövegét. Mivel abszolut pozíciónáltuk, ezért érdemes megadni a span bal-felső koordinátáit a top:0px; és a left:0px; -el. Végül az egy soros background-dal az összes gombunk takaró spanjának megadjuk a kívánt, egy háttérrel megoldott menüképünket.
position: absolute;
background: url(button.gif) no-repeat;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
display: block;
overflow: hidden;
}
Végül minden egyes spannak - direkt célzással - felvesszük a háttérképén a megfelelő pozíciót. Elöször definiáljuk az alap állapotát, majd a hover-t. Mivel a gombok alap és rollOver állapotát érdemes egymás alatt elhelyezni, ezért a két background állapot között a jobb oldali értékkel, a fentről -24px-ellel lejjebb változik.
background-position: -4px 0px;
}
div#footer a#menu-item1:hover span {
background-position: -4px -24px;
}
div#footer a#menu-item2 span {
background-position: -118px 0px;
}
div#footer a#menu-item2:hover span {
background-position: -118px -24px;
}
div#footer a#menu-item3 span {
background-position: -194px 0px;
}
div#footer a#menu-item3:hover span {
background-position: -194px -24px;
}
A metódus maga, csak elsőre tünik olyan bonyolultnak, ráadásul utolagosan akár egy img taget, könnyen kiszedhető egy gomb a html-ünkből, vagy szimplán css-ből az li idjén keresztül display:none-al eltüntethető.
és a számunkra legfontosabb részletek, maguk a BUGOK:
És igen, mint minden css alapú dolognál itt is vannak böngésző eltérésekből fakadó hiányosságok, hibák, bugok, stb.
- Az egyik ilyen, egy ie5 és ie6nál felmerülő eset, hogyha a css elején nem definiáltunk eltérő text-decoration állapotot az ‘a’ és ‘a:hover’-nek, akkor az ie hajlamos elfelejteni az első hover megjelenítése után az egér elmozgatása esetén az alap állapotra vissza húzni a gomb textúráját.
- A másik, hogy GoogleToolbar, Yahoo toolbar, és Ie devtools használata esetén villódzni szeret szerencsétlen imagereplace, ami megint csak nem túl szerencsés.
- Végül, hogy pl ie, ff, opera előfordul, hogy eltérően számítják egy háttértextúra 0px-es értékét, és egy 1 pixeles eltérés figyelhető meg, de ezzel is viszonylag ritkán bukik le a shitbuilder
- gyakran megoldás lehet rá, hogy 0px helyett a top vagy elf tértéket adjuk meg, illetve, hogy 1px-t állítunk be, így már mindannyian ugyanazt a pontot fogják megjelölni.
Természetesen egyéb képcserélős css metódusok is akadnak, részletesebben az alábbi linkeken találsz felvilágosítást, illetve néhány egyéb technika is bemutatkozik, hogy egyes szitúációkat, hogyan lehet elkerülni…
Elsőre ennyi jutott eszembe a téma kapcsán, remélem segítségedre voltam
Előre!!!