Legutóbb szépen feldíszítettük készülő galériánk indexoldalát, ám azért, hogy jobban tudjunk koncentrálni a következő lépésre, vagyis a nagy(obb) méretű képek megjelenítésére, ezért most az akkor tanultakból szinte semmit nem fogunk felhasználni. Indexképeinket elsősorban azért "csupaszítjuk vissza", hogy HTML- és CSS-kódjaink áttekinthetőbbek legyenek, jobban lehessen látni a képek JavaScript-mentes megjelenítésének mikéntjét. Hasonló okból érzékeny búcsút veszünk a Microsoft már bőven iskoláskorú böngészőjétől, a 2001. augusztus 27-én megjelent Internet Explorer 6-tól. Ugyan galériánkat némi "csiszolgatással" IE6-kompatibilissé alakíthatnánk, ám ezzel kódjainkat - és magát a cikket is - körülbelül a duplájára hizlalnánk, ráadásul pont a lényegről, a rövid, frappáns megoldásokról kellene lemondanunk.
Egyszerű képlista
Hasonlóan legutóbbi leckénkhez, a HTML-kódot a lehető legegyszerűbben építjük fel: képeinket egy photos osztálynevű rendezetlen listában soroljuk fel. Ezt a listát, hasonlóan az indexképek parafatáblára szögelésekor használt megoldáshoz, egy container osztálynévvel ellátott ‹div›-en belül helyezzük el. Azonban ez a ‹div› most nem a dekoráláshoz, hanem pozicionáláshoz kell majd. Nagyon fontos különbség, hogy az indexkép mögé - még a hivatkozáson belül - egy ‹span›-be helyezzük el magát a képet, vagy legalábbis annak egy nagyobb méretű változatát. (A példában a hivatkozás ugyanerre a képre mutat, de ez nem kötelező, mutathatna akár a kép egy még nagyobb változatára, vagy egy HTML-oldalra is.)
Amelyik kis képre rámutatunk, az megjelenik nagyban
A stíluslapunk egy szokásosnak mondható inicializálással kezdődik, amit a ‹body› és a címsor egyszerű formázása követ. A képlistát tartalmazó ‹div› elem magasságát és szélességét úgy kell kiszámolnunk, hogy abban kényelmesen elférjenek az indexképek és majd - ez esetben alattuk, de lehetne fölöttük, vagy akár mellettük is - az éppen kijelölt kép. A ‹div›-et a szokásos módon igazítsuk középre (margin: 0 auto;), lássuk el egy kis "belső margóval" (padding: 5px;) és egy egyszerű kerettel (border: 3px double #000;) - de ami igazából nagyon fontos, hogy ne feledkezzünk meg arról, hogy a pozícióját relatívra kell állítani (position: relative;). Ez utóbbiról megtanultuk, hogy a legtöbb esetben nem azért van rá szükség, mert szeretnénk elmozdítani - bár ha szükséges, erre is van lehetőség -, hanem azért, hogy a benne található objektumokat ehhez az elemhez tudjuk pontosan igazítani.
A képlistában a fotók kicsiben és nagyban is megtalálhatóak
A képlistát (ul.photos) és elemeit (ul.photos li) alig-alig formázzuk (25-34. sorok), ahogyan az ígértük, maga a lista elég puritán módon fog kinézni. Igazából dekoráció annyi lesz csak rajta, hogy az indexképek kapnak egy közepesen vastag fehér, vagyis eleinte nem is látható keretet (border: 4px solid #fff;), amelynek a színe világosszürkére változik, amint az egér a hivatkozás (látható része), azaz az indexkép fölé ér (40-42. sorok).
Eddig szinte mindent ugyanúgy csináltunk, mint a legutóbbi leckében, ami nem is meglepő, hiszen tulajdonképpen nem tettünk mást, mint - hamarosan életre kelő - galériánk indexképeit elhelyeztük szépen, sorban - már ha nem zavarnának be ‹span› elemekbe ágyazott nagyobb képek.
A nagy képeket kitoljuk a képernyőről és csak a kiválasztottat engedjük vissza
Igazából a trükk a 44. és az 54. sorok között található. Először is - megint csak hasonlóan az előző leckében tanultakhoz - a hivatkozáson belül, az indexképek mögött található sorszintű ‹span› elemeket alakítsuk blokkszintűvé. Azonban ezúttal nem azért, hogy a méretüket megadhassuk, hiszen miután képeket tartalmaznak, amúgy is van szélességük és magasságuk (az 47. sorban található width inkább csak "biztonsági elem"), hanem azért, hogy pontosan el tudjuk helyezni a referenciaként használt ‹div›-hez képest. Ehhez először is változtassuk a pozicionálását abszolútra (position: absolute;), majd állítsuk be a bal felső sarkának a pozícióját (top: 152px; left: -9999px;). Ez utóbbi értékből sejthető, hogy a képekből (kezdetben) nem sokat fogunk látni, hiszen azokat - a fél évvel ezelőtt a címsorok "képesítésekor" használtakhoz hasonlóan - igen messzire eltoltuk balra. Kivételt csak az a kép fog jelenteni, amelyiknek hivatkozása, azaz indexképe fölött az egér áll, hiszen az a:hover span jelölő erre, és csak erre utal, márpedig ezt a képet a left: 10px; "CSS-utasítással" visszahozzuk a kereten belülre.
A képek "rögzítése"
Sok esetben már ez a megoldás is bőven elegendő, de azért még bőven tudunk rajta finomítani. Először is, ha figyelmesen nézzük az oldalt, miközben az egeret az egyik indexképről a másikra húzzuk, akkor látni fogjuk, hogy a nagy kép nem egyszerűen átvált az egyikről a másikra, hanem villan egyet. Sőt, ha nagyon lassan, esetleg meg-megállva húzzuk az egeret, akkor azt is észrevehetjük, hogy e villanás oka az, hogy a két keret közötti 2 pixeles "mezsgyén", vagyis amikor az egyik indexképet már elhagyta az egérkurzor, de a másikra még nem ért át, akkor a nagy kép helye üres lesz, hiszen ez esetben egyik hivatkozás sem "élő", nincs olyan kép, amelyiket visszahúznánk a képernyő látható részére. Ha ezt szeretnénk elkerülni, akkor valamilyen módon biztosítanunk kell azt, hogy az utoljára kijelölt kép egészen addig aktív maradjon, amíg újat nem választunk, vagy el nem hagyjuk a galéria keretét.
A nagy kép akkor sem tűnik el, ha az egér elmozdul az indexkép fölül
Ahhoz, hogy ezt a problémát megoldjuk, tudnunk kell azt, hogy a :hover pszeudoosztály az objektumoknak mely részein aktiválódik. A Websuli nyolcadik leckéjében volt szó először az úgynevezett dobozmodellről. Ebben a részben Balázs részletesen bemutatta, hogyan is épül fel egy elem doboza: margó (margin) - keret (border) - helykitöltő vagy "belső margó" (padding) - tartalom (ami ez esetben egy kép). Rövid kísérletezéssel (például az indexképeknek kicsit vastagabb margót és némi eltartást adva) kideríthető, hogy ezen részek közül egyedül a margó nem aktív terület, vagyis egy objektum akkor is "aktiválódik", ha az egér a kerete vagy a helykitöltője fölé ér.
A ‹span› egy kicsit több helyet foglal - még ha ez a végeredményen nem is látszik
Most már csak az a kérdés, hogy az indexképhez hogyan tudunk úgy további területeket adni, hogy a dizájn se sérüljön, és galériánk se essen szét? Egyszerű eszközökkel sehogy - az indexképek egyenkénti pozicionálása megoldás lehetne, de az nem igazán kényelmes, és főként nem elegáns megoldás -, de szerencsére nincs is rá szükség. A hivatkozás (illetve a felsorolás elem) tartalmi részéhez ugyanis nemcsak az indexkép, hanem az alapértelmezés szerint a képernyőről eltávolított nagy kép is hozzátartozik. Márpedig ez utóbbi képet kicsit egyszerűbben tudjuk kiterjeszteni, mint az indexképeket, már csak azért is, mert ezekből úgyis csak egy fog egyszerre látszani.
Ezért a képet nem úgy fogjuk a helyére illeszteni, hogy a bal felső sarkát lejjebb toljuk 152 képponttal, hanem hagyjuk azt nullán (top: 0;), és a felső paddingot állítsuk 152 pixelre, a többit pedig 10-re, hogy minden irányban legyen egy kis "kifutásunk" (padding: 152px 10px 10px 10px;). Ez utóbbi, egész pontosan a bal oldali 10 pixeles eltartás miatt a kiválasztott képhez tartozó ‹span› elem bal szélét nem 10, hanem 0 pixelre kell állítanunk (left: 0;).
Internet Explorer alatt egy kis csalásra van szükség ugyanannak a hatásnak az eléréséhez
Már majdnem készen is vagyunk, de csak majdnem. Ugyanis ha most megnézzük, hogy eddig mit csináltunk, akkor azt fogjuk tapasztalni, hogy miután kiválasztottunk egy képet, azután már nem tudunk újabbat beállítani - egészen addig, amíg az egeret ki nem visszük a galéria keretéből. Ennek az az oka, hogy a kiválasztott kép, egészen pontosan annak eltartása eltakarja az indexképeket, még ha ez nem is látszik, hiszen nem adtunk meg sem háttérszínt, sem háttérképet. Ahhoz, hogy az indexképekhez továbbra is hozzáférjünk, a nagy képet az eltartásával együtt "hátra kell küldenünk". Ezt a z-index stílustulajdonság beállításával tehetjük meg. A z-index azt határozza meg, hogy az abszolút, a relatív és a rögzített pozíciójú elemek milyen sorrendben jelenjenek meg. Alapértelmezés szerint az objektumok megjelenítési sorrendje megegyezik a HTML-kódban elfoglalt helyükkel, azonban a z-index megadásával ez megváltoztatható. Minél nagyobb ez az érték, az objektum annál később, vagyis annál feljebb jelenik meg, de szükség esetén kis érték megadásával gondoskodhatunk arról, hogy az adott elem minél hátrébb kerüljön. Éppen ezért képünket a z-index: -1;-gyel küldjük a lehető leghátrébb, míg magát a container ‹div›-et, és mindent, ami azon belül van, biztos, ami biztos alapon hozzunk előre a z-index 10-re állításával (23. sor). Így már valóban az fog történni, amit mi szeretnénk, vagyis a kiválasztott kép egészen addig látható marad, amíg másikat nem választunk, vagy az egeret ki nem visszük a galéria keretéből.
Az éles(ebb) szeműek azt is észrevehették, hogy a CSS-ben a nagy képet tartalmazó ‹span› szokásos "teljes útvonal" leírásából (ul.photos li a span) hiányzik a hivatkozás (ul.photos li span). Ez nem figyelmetlenség, hanem a sajnos szokásosnak mondható "redmondi effektus" kivédése: így ugyanis galériánk Internet Exporer 7 alatt majdnem úgy működik, ahogyan szeretnénk, míg ha a hivatkozásokat is szerepeltetjük a ‹span›-ok útvonalában, akkor nem.
A keretek tulajdonképpen egymásba érnek - csak ez nem fog látszani
Hasonló okokból készült el ennek a változatnak a "b" jelű variánsa, ami kisebb "méretigazításokon" túl abban tér el az - Firefox, Chrome és Opera alatt tökéletesen működő - alap változattól, hogy ennél az indexképek keretei tulajdonképpen összeérnek, hiszen a listaelemeknek nullára állítjuk a margóját, csak ez nem látszik, hiszen a keret színe megegyezik a háttér színével. Ennek a csalásnak köszönhetően nincsen "holttér" az indexképek között (ugyebár a keret is aktív területnek számít), amíg fölöttük mozog az egérkurzor, addig valamelyik mindig kijelölt lesz. Nem szép, de néha kimondottan praktikus megoldás - mint ez esetben is.
Gördülő indexképek
Az indexképek ilyetén elhelyezésével az a probléma, hogy túl sok helyet visznek el, pedig példáinkban mindössze tizennégy fotót mutatunk be. A hasonló galériák esetében sokkal praktikusabb, ha az indexképeket egy sorba vagy egy oszlopba rendezzük, és lehetővé tesszük, hogy ezt a sort vagy oszlopot a felhasználó görgetni tudja.
Ehhez szükségünk lesz egy plusz ‹div› objektumra, amelynek adjuk a scroll osztálynevet - ez mintegy ablakként fog működni, amely mögött az indexképek csíkját tudjuk mozgatni. Ezt az új ‹div›-et természetesen a listán kívül, de még a galériának keretet adó container ‹div›-en belül kell elhelyeznünk.
A gördíthető sávon az indexképek kevesebb helyet foglalnak
A képlista szélességét úgy kell kiszámolni, hogy azon pont elférjen az összes indexkép - az esetleges kerettel együtt. Az, hogy "pont elférjen" azt jelenti, hogy akkor számoltunk pontosan, hogy az oldal megjelenítésekor csak vízszintes görgetősávnak szabad megjelennie, amit ha teljesen elhúzunk a végéig, akkor az utolsó képkocka pontosan a keret jobb széléhez igazodik (31-35. sorok). Ezt úgy tudjuk tesztelni, hogy ha egy pixellel keskenyebbre vesszük a lista szélességét, akkor már a függőleges görgetősávnak is meg kell jelennie az oldal következő frissítésekor.
Az indexképeket "kimaszkoljuk" egy hozzáadott ‹div›-vel
Az elegánsabb megjelenés miatt a listaelemekhez egy 35 milliméteres filmkocka képét adjuk háttérnek, és ehhez igazítsuk a magasságokat, szélességeket, valamint a külső és belső margókat, továbbá húzzunk egy vékony fehér keret a kiválasztott indexkép köré (37-52. sorok).
Azért, hogy a csíknak csak egy adott darabját lássuk, a külön erre a célra létrehozott ‹div›-nek adjuk azt a szélességet, amit korábban a listánknak adtunk. A ‹div› magasságát igazítsuk a dekorációs célokat szolgáló filmcsík magasságához, és ami a legfontosabb, az overflow stílustulajdonságot auto-ra állítsuk. Ez utóbbi eredményeképpen eltűnik a filmcsík ‹div›-ből kilógó része, ugyanakkor a ‹div› alatt megjelenik egy vízszintes görgetősáv, amit mozgatva a képlista további elemeit is meg tudjuk nézni.
Az indexképek listája csak az adott szélességű ‹div› "ablakán át" fog látszani
A képeknek ebben az esetben csak annyi eltartást kell adnunk, hogy aktívvá tegyük a kiválasztott, vagyis a kereten belülre mozgatott kép és az indexképek csíkja közötti vékony sávot.
Információ a fotókról
Ha szeretnénk képeinkről némi információt is megjeleníteni, amikor a felhasználó a kép fölé mozgatja az egeret, azt is hasonló módon tehetjük meg. Természetesen ehhez szükségünk lesz a szükséges információkra, amit a képek mögé, de még az azokat tartalmazó ‹span›-okon belül kell elhelyeznünk egy alapértelmezés szerint sorszintű elemben, például ‹em›‹/em› páros közé zárva.
A kép fölé mozgatva az egeret rövid leírás jelenik meg
Miután ezek szülőelemeit, a ‹span›-okat korábban már eltüntettük a képernyőről, így azzal nem kell foglalkoznunk, hogy ezekkel mi történik addig, amíg a képet, pontosabban a ‹span› objektumot a képernyőre nem mozgatjuk. Ám attól, hogy a felhasználó az egeret egy indexkép fölé viszi, és ezzel az adott ‹span›-t megjeleníti, mi még nem szeretnénk az egyébként szépen formázott, többek között átlátszó PNG hátterű ‹em›-ünket is láthatóvá tenni. Ezért ennek láthatóságát kapcsoljuk ki (display: none;), és csak akkor kapcsoljuk vissza, ha az egér az indexképről a kép fölé ér (88-90. sorok). A 84. sorban található display: block; senkit ne tévesszen meg, ez csak arra szolgál, hogy a képleírások "címsorait", amelyeket a ‹b›‹/b› párosok közé írtunk, önálló bekezdésekké alakítsunk át.
HTML-ünk egy kicsit hosszabb lett - a képcímek és a leírások bizony helyet foglalnak
Most már tényleg az történik, amit szerettünk volna: az indexkép kiválasztása után megjelenik a kép nagyban, és ha a felhasználó e kép fölé viszi az egeret, akkor annak tetején egy elhalványított területen megjelenik a kép hosszabb-rövidebb leírása. Mindez anélkül, hogy egyetlen sornyi JavaScript-kódot kellett volna írnunk.
A :hover :hover-jével is foglalkoznunk kell a szövegek megjelenítéséhez
A cikkben bemutatott példaprogramok és mintaoldalak letölthetők innen.
