Css Image replace a gyakorlatban
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!!!
July 9th, 2007 at 01:29
Waaaaa, lehet kommentezni.
Az első szembetűnő hiba, hogy a befogadó elem a html kódban egy p(aragraph) a css-ben viszont egy divet definiálsz(ami azt jelenti, hogy nem fog működni az egész).
A másik dolog, ami szerintem kimaradt, az az “a” elemek floatolása. Megadtad a befogadó div(vagy paragraph???) magasságát 21 pxben, ami megegyezik az anchorok magasságával. Ez eddig ok, de a display:block az anchorokon floatolás vagy absolute pozícionálás hiányában azt eredményezi, hogy egymás alatt fognak megjelenni, így “szétesett” oldalt kapunk. Megemlítesz vmi li-t is, ami fura, mert a kódban nincs sehol…
Csak ennyi, szép a blog, gratulálok. Te csináltad a grafikát is?
July 9th, 2007 at 08:23
Szia Cooper,
Köszönöm az észrevételeid, mint mindig a sasszem tarol
A P helyetti div-et javítottam, ám megmondom őszintén ezt a tréfát sokadszorra awordpress kódszínezője ejti velem, mintahogy más szitukat is elbírál helyettem…egyenlőre.
A floatolos kérdés is jogos, mivel ezt egy ul/li/a/span variációban használom előszeretettel, így ilyen példát raktam ide ki, természetesen javítottam a példában, és a technikai részletek ismertetésében is tökéletesen igazad van. Ezzel szemben maga példa, és a benne vétett hiba is úgy látom renekül szolgálja azt acélt amiért létrehoztam a blogot magát, hogy azon technikai jelenségekről beszéljünk, netán hibákról, az elméletről. Tenkes
Valamiért még mindig moderálási sorba kerülnek a kommentek, pedig én ezt nem így állítottam be, és most ellenőrizvén sem imigyen kéne müködnie, szóval újabbb köröket harcolok a WP-vel, amiből előbb-utóbb én jövök ki győztesként.
Végül köszönöm a kedves szavakat, igen a dizájnt is én követtem el. MEgjegyzendő, hogy állandó finomításokra szorul nem csak a dizájn de a hozzá tartozó css is, mivel a használat során újabb és újabb felületekre jutok ez az oldalon, ahol más és más körülmények közt kell helytállnia a kódnak.
November 26th, 2007 at 15:08
Hát én mindennel próbálkoztam már de nem tudom megcsinálni a dolgot. Mindig azt kapom hogy syntax errot. Feltöltöttem a fájlokat ide: http://takatstamas.extra.hu/php/images/css-dock-menu.zip
Nézzétek meg légyszives. A menu.php és az estili.css az oldalamhoz tartozik a többi az adott menühöz amit be szereték varázsolni az oldalamra. Remélem tudtok nekem segíteni legalább az elindulásban. E-mail címem: fridrik.bela@gmail.com
Nagyon fontos lenne hogy meg tudjam ezt oldani.
Előre is köszönöm!
November 26th, 2007 at 17:23
Béla, most nagyon el vagyok havazva, de azt ígérhetem, a héten amint lesz egy kis időm megnézem neked a dolgot. Az egyetlen ami egyébként már most kicsit furcsának tünik nekem, hogy Syntax error-t hogyan is kaphatsz css mókára..de ez persze részemről látatlanba csak hipotetikus dolog…. a puding próbája az evés
November 26th, 2007 at 21:23
na nekiestem és sikerült. De nem teljesen! ie alatt a png ikonok kisebbek sokkal mint firefox alatt pedig raktam bele ie png ficet is! Ötlet?