Az előző számban aztígértem, hogy körüljárom az átlátszó GIF-ek problémáját. Talán kezdjükezzel! 

A GIF

A hagyományos GIFformátum már elég régóta létezik, 256 vagy kevesebb színű képek tárolásátteszi lehetővé Interlaced vagy non-Interlaced sorrendezéssel és veszteségmentestömörítéssel. Viszonylagos egyszerűsége, és kis mérete miatt vált az Internetelsődleges képformátumává – amíg a JPEG ki nem szorította. Ma már talánnem is találkoznánk vele, ha nem vértezték volna fel néhány olyan “fegyverrel”,ami ma is létjogosultságot biztosít neki. Ilyen “fegyverek” az átlátszóságés az animálás lehetősége.

Mi is az átlátszó GIF vagyGIF89a?

A régi, egyszerű GIF-ekelső néhány azonosító bájtja GIF87a, az átlátszó GIF-ek első néhány bájtjaGIF89a – innen a név.

Az átlátszó GIF nemsokban különbözik korosabb társainál, csupán annyit változtattak az eredetiformátumon, hogy a palettába tettek egy kitüntetett színt (ezzel a maximálisanhasználható színek száma 255-re csökkent), amelyet aztán a beolvasáskorki kell lyukasztani. Ez a megoldás gyakorlatilag fájdalommentes, hiszena kép nem lesz nagyobb, a lyukaszásra lefoglalt szín nem hiányzik senkinek,és mégis meg van oldva az átlátszóság. Egyrészről jó, hogy nem kell küzdeninagyobb képfájlok letöltögetésével, másrészről viszont van egy csomó hiányosság: 

  • Mi van, ha nekem mosott szélűvé kell tennemegy képet? 
  • Mi van, ha kevés a 255 szín? 
  • Mi van, ha átlátszósági fokozatokat szeretnék?

Sajnos a fenti kérdésekremég nem született meg a válasz (lehet, hogy ezek a lehetőségek csak nekemhiányoznak?) de azért így is megéri küzdeni átlátszó képekkel, mert jópofahatásokat lehet velük elérni.
 

GIF 87a

A képen jól látható, hogy rondafehér téglalapban van.
Ugyanaz GIF 89a-ban

Ezt a képet átlátszó GIF-be mentettem, 
látható, hogy eltűnt a fehér keret.

Lássuk, miként!

Eszközként most isa PhotoShop-ot, alapanyagként pedig a legutóbb elkészített pacnikat fogomhasználni. 

Először a kézenfekvőmegoldás: Fogjuk az illető gombot (külön layeren van) és csak ennek a láthatóságáthagyjuk bekapcsolva.

Ezek után nincs másdolgunk, mint a File/Export/Gif89a Export… menüpontra kattintani és beállítgatniaz egyes értékeket.

Lássuk: 

  • Transparency FromMask - Itt állíthatjuk be, hogy milyen színt szeretnénk átlátszóságkéntdefiniálni. Ennek ilyen képeknél csak annyiban van jelentősége, hogy aPhotoShop ebbe a színbe fogja bele mosni a kép határait (Antialias). Ettőla mosástól tűnnek el a kép széleiről a rücskök, amik egyébként a pixelekméretei és a szélsőséges kontrasztok (pl: fekete háttér – sárga gomb) miattlátszanának.


  •  
  • Palette – lehetAdaptive vagy System. Fentebb említettem, hogy a GIF csak 256 illetve255 színű lehet. E korlátozás miatt kénytelenek vagyunk 16 millió színbenszerkesztett ábráinkat 255 színre butítani. Szerencsére ez a butítás alegtöbb esetben nem szokott látszani mivel azt, hogy melyik 255 színt fogjukhasználni, mi választjuk ki. 

    • Adaptive beállításbana PhotoShop a kép színeit úgy válogatja össze, hogy az a lehető legjobbanhasonlítson az eredeti ábrára.


    •  
    • System beállításban aképek színei egy előre meghatározott Windows palettából kerülnek kiválasztásra.Ezt a beállítást akkor kell használni, ha 255 vagy kevesebb színben fogjáknézni a web oldalt, amit készítünk (van még ilyen?). 

  • Colors – Itt adhatjukmeg, hogy hány színt szeretnénk felhasználni a rendelkezésre álló 255-ből.Célszerű a lehető legnagyobb értéket választani, hacsak az nem nagyobb,mint amiben majd nézni fogják az oldalt.

  • Interlaced – A kép sorrendezésétállíthatjuk be – ma már nincs jelentősége.

A konverziós beállítóablak – húúúú milyen tudományosan hangzott – szóval a fent látható párbeszédpanelcsak akkor néz ki így, ha True Color képet szeretnénk konvertálni. Ha palettázottképet szeretnénk átlátszóvá tenni, akkor a következő ablak jelenik meg:

Itt gyakorlatilagugyanazok a beállítási lehetőségek, mint az előbb, azzal a különbséggel,hogy az átlátszó színeket mi jelölhetjük ki a palettából vagy a képheztartozó csatornák egyikéből. 

Érdemes megjegyezni,hogy ha csatornákat is tartalmazó palettázott képet mentünk GIF-be (nemátlátszóba),  a PhotoShop a csatronákat automatikusan felhasználjaátlátszósági információnak.

Úgy gondolom, az átlátszó képek készítéséretöbb szót nem érdemes vesztegetni.

A következő problémaaz előbb megismert tetszőleges alakú gomboknál az, hogy a gomb akkor isbenyomódik, ha az egér csak a befoglaló téglalapba ér. Erre is van megoldás:

MAP fájlok használata

A MAP fájlok a HTML-hezhasonló szöveges információkat hordoznak és azt szokás bennük leírni, hogyegy adott kép mely területeihez milyen linkek tartoznak, vagyis ezeketa fájlokat képekhez rendelhetjük és megadhatjuk bennük, hogy melyek a képekinteraktív részei, amelyekhez linkeket rendelünk. Legtöbbször nem négyzetalakú gomboknál használják, hogy kattintani csak a gomb területe felettlehessen.

Mindez a gyakorlatban

<img SRC="gomb.jpg" USEMAP="#map1">

A fenti tag egy képbeszúrás egy HTML oldalon. Az img a kép kulcsszava, az SRCjelenti a kép forrását, a Usemap kulcs pedig a hozzárendelt map.A map-eket a HTML-ek végére szokták rakni <MAP> és </MAP> közé (fantáziadúsan).

Map-ek felépítése

<MAP NAME="map1">

<AREA Shape="POLYGON" 
     COORDS="0,0, 100,0, 50,100" 
     HREF="ize.htm">

</MAP>

Az itt látható HTMLrészlet egy olyan map, amely a 0,0; 100,0; 50,100 csúcspontokkal rendelkezőháromszög területén belül az ize.htm fájlra linkel. 

A map-ben AREA tag-okkövetik egymást, a Shape kulcs határozza meg a körülhatárolni kívánt területalakját. A shape lehet:

  • Rect – téglalap 

  • A Coords kulcsban a bal felső sarokés a jobb alsó sarok koordinátáit kell megadni.
     
  • Polygon – sokszög 

  • A Coords kulcsban a sokszög csúcsainakkoordinátáit kell megadni.
     
  • Circle – kör 

  • A Coords kulcsban a kör középpontjánakkoordinátáit és a sugár nagyságát kell megadni.

Egy map-ben több areatag-ot is megadhatunk, vagyis egyetlen kép több helyre is mutathat. AzArea tag-ban használhatók a képekhez és hivatkozásokhoz használatos továbbikulcsok is pl.: OnMouseMove, OnMouseOver, OnMouseOut, Target.

Egész eddig arrólbeszéltem, hogy itt mindenféle koordinátákat kell megadni. Ezek a koordinátákpixelben kifejezett értékeket jelentenek mégpedig úgy, hogy a 0,0 koordinátaa kép bal felső sarka. Érdemes még megjegyezni, hogy ha nagyítjuk vagykicsinyítjük a képet a HTML oldalon, akkor a böngésző nem fogja újraszámolnia koordinátákat vagyis elcsúsznak az általunk meghatározott területek.

Egyébként ettől azegész map-es őrülettől megkímélhetjük magunkat, ha valamilyen kifejezettenweb-es képszerkesztővel vagy CorelDraw 8.0-val dolgozunk. Mivel ezek azeszközök nem mindenki számára hozzáférhetők, maradjunk a jól bevált PhotoShop-nál– már csak azért is, mert a 26. PC-X CD-n van belőle egy kipróbálható verzió.

A PhotoShopban a fentemlegetett koordinátákat a Window menü Show Info pontjában előbukkanó ablakbanlehet megtalálni.

Most már nincs ismás dolgunk, mint az egérrel szépen körbe járni a linkként felhasználnikívánt területet és írogatni a koordinátákat.

Végezetül két példa:
Vidd az egeret a kutya és a gombokfölé!


MELLÉKLETEK
A legelső ellipszis alakú gomb gomboc.psd
Az első példa kutya.psd
A második példa korgomb.psd
A PC-X User alapjai alapok.zip
A példák HTML forrásai kutya.htm