Képjátékok — Világító gomb/Tutorial

2008 augusztus

Ha a kurzorral ráállunk egy-egy gombra, akkor olyan hatást tapasztalunk, mintha az kigyulladna.

Mivel a gombok most csak illusztrációként szolgálnak, ezért a rájuk kattintással mindösszesen csak az oldal aljára ugorhatunk, az aktuális gomb beillesztéséhez alkalmazott kódrészlet leírásához.

 

 

A balra látható gombot, némi módosítással és egyszerűsítéssel, Gimpertől vettem át a gimp-tutorials.net-ről.

1. ábra

Jelen esetben nincsen képünk, amelyet megnyithatnánk, ezért magunknak kell készíteni egyet. Mivel ez a honlap fekete háttérszínű, ezért az új kép készítése előtt a GIMP főablakában középen felül látható, az előtér és a háttér színét mutató téglalapok váltónyilára kattintottam, hogy felcseréljem a két színt, és a fekete legyen a háttérszín, mert alapértelmezésben ez a fehér lenne. Az új kép alapszínének a program ugyanis az aktuális háttérszínt állítja be.

A GIMP főablakában balra felül láthatjuk a Fájl címszót. Erre kattintva annak legördülő menüjében az Új sorra kattintva a balra látható ablak bukkan föl. A kép méretére eredetileg 420 képpontos szélességet, és 300 képpontos magasságot kínál fel a program. A mostani példában a szélességet átírtam 200-ra, a magasságot pedig 100-ra. (Ha gombképet csinálunk, érdemes kis méretben dolgoznunk, és nem egy nagyobb képet utólag lekicsinyítenünk, mert ekkor kellemetlen meglepetések érhetnek bennünket: az eredetileg részletgazdag, és jól olvasható gombképünk akár olvashatatlanná is válik.)
Ha felülírással bevittük az adatokat, akkor lenyomhatjuk az OK gombot, és a program egy Névtelen megjelölésű képet készít nekünk, amelyet bármilyen néven elmenthetünk (a kép ablakában a Fájl alatt a Mentésre kattintva). Ennek a képnek történetesen a vilagitogomb.xcf fájlnevet adtam, mert a legjobb eredményt akkor kapjuk, ha a GIMP saját fájlformátumában (.xcf) dolgozunk, és csak a munkánk végén mentjük el más (pl. .jpg, .gif, .png stb.) formátumba a képünket.

A kép alapszínét előre is beállíthatjuk, de utólag is, ahogy tetszik. Célszerű olyan háttérszínnel dolgoznunk, amilyen színű környezetbe szánjuk a gombunkat, hogy annak háttere ne tűnjön fel.

2. ábra

A képet tartalmazó ablakot képablaknak nevezem. Megkönnyíthetjük a munkánkat a Windows alatt futó GIMP-nél, ha összeállítunk egy "munkaablakot" is: a képablak Párbeszédablakok címszavának legördülő menüjéből hívjuk meg a Rétegeket, mire felbukkan annak az ablaka. Eme utóbbiban jobboldalt felül látszik egy kis balra mutató nyíl (l. 2. ábra). Ha erre kattintunk, újabb menü tárul a szemünk elé. Ebből válasszuk a Lap hozzáadását, és annak a menüjéből pedig az Eszközbeállításokat. Ugyanígy vegyük fel a lapok közé még a Színeket is, s így egy munkaablakban lapozhatunk majd eme funckiók között.

A leírásban megadott gyorsbillentyűknél a gyári kódokat használom. Ha valaki ezeket átállította, akkor értelemszerűen a saját kódjait alkalmazza.

3. ábra

Ha a honlapunk éppen nem fekete, vagy fehér színű, akkor akár mindjárt be is állíthatjuk a saját háttérszínünket. A munkaablakunkban kattintsunk a Színek fülére. A 3. ábrán látható beállítási lehetőségekhez jutunk, ha a Wilber-fejes gomb van lenyomva. Jobboldalt alul a beviteli mezőbe gépeljük be a saját, honlapunkon alkalmazott háttérszín HTML-kódját, majd nyomjunk Enter-t. A példában, amelyet a továbbiakban nem fogok használni, a 70baff kódot adtam be, egy világoskék színt.

Ezután a képablakban a Szerkesztés menüjéből válasszuk a Kitöltést az előtér színével, ha erre állítottuk be a saját színünket, és nem a háttérszínre, mire a program kékre festi az eddigi egyetlen, Háttér nevű rétegünket.

4. ábra

A Háttér nevű alaprétegünk fölé készítsünk egy újabb, átlátszó alapú réteget. A munkaablakunkban kattintsunk a Rétegek fülére. Annak legalsó sorában a hat gomb közül a bal elsővel készíthetünk új réteget. A lenyomására felbukkanó ablakban mindjárt nevet is adhatunk az új rétegünknek, ha felülírjuk az alapértelmezett "Új réteg" nevet. A példában a Gombtest nevet adtam neki. A felkínált rétegméret, ami egyezik a képével, és az átlátszó rétegalap meg is felel, ezért OKézhatunk.

5. ábra

Most a képablakban állva nyomjuk le az r (rectangular, azaz négyszögletes) gyorsbillentyűt, vagy az Eszközök legördülő menüjéből a Kijelölőeszközök közül válasszuk ki a Téglalap-kijelölést, a munkaablakunkban pedig kattintsunk az Eszközbeállítások fülére, hogy az 5. ábrán látható képet láthassuk.

Ezzel a kijelöléssel fogjuk megadni a gombtestünk alakját és nagyságát. Pipáljuk ki a Lekerekített sarkok melletti négyzetet, és a kerekítés sugarának adjunk be 10-et. Ugyancsak jelöljük be a Kiterjesztést a középpontból (erre kattintás utáni húzáskor a kattintás helyét fogja a téglalap középpontjának venni a program, és onnan fog a húzásra növekedni a téglalapunk), és a Rögzítést is. Eme utóbbi melletti legördülő menüből az alapértelmezett Méretarány helyett válasszuk ki a Méretet, és az alatta levő beviteli mezőbe felülírással vigyünk be 100x30-at.

A képablakban kattintsunk a bal egérgombbal, és húzássa vigyük a kurzorunkat a kép közepére, azaz a 100,50 koordinátákhoz (melyeket a képablak bal alsó sarkában olvashatunk le). A rögzített méret miatt mindjárt egy 100x30-as téglalapot kapunk, lekerekített sarkokkal.

6. ábra

A gombunkat most egy színátmenettel fogjuk kifesteni. Nyomjuk le az l (L, mint Lajos) billentyűt, vagy a képablakban az Eszközök menüjéből a Festőeszközök közül válasszuk a Színátmenetet.

A módot és az átlátszatlanságot hagyjuk az alapértelmezett értékeken, viszont a Színátmenet melletti téglalapba kattintva legördülő menüből válasszuk a Horizon 2 átmenetet. A többi beállításon nem kell változtatnunk.

7. ábra

A képablakban álljunk a kurzorunkkal a kijelölésünk felső peremére, kattintsunk és húzzunk egy szakaszt a kijelölés alsó pereméig. Felengedve az egérgombot a 7. ábra képét kell látnunk.

Már nincs szükségünk a kijelölésre, ezért szüntessük meg: a képablakban a Kijelölés menüjéből válasszuk a Semmit.

8. ábra

A színátmenetet most nem kékben akarjuk használni, hanem fekete-fehérben, ezért állítsuk teljesen telítetlenre a színeit. A képablakban a Színek menüjéből hívjuk meg a Telítetlenné tételt. A kijelölés alapjának meg is felel az alapértelmezett Fényerő szerinti, ezért nyomjuk le a Telítetlenné tevés feliratú gombot.

Ha a gombunkat így még túl unalmasnak találnánk, akkor módosíthatunk a kinézetén, például a Görbék funkció alkalmazásával.
Ezt a képablakban a Színek menüje alatt találjuk.

9. ábra

Az ablaka eleve az Érték csatornával bukkan föl (baloldalt fölül), és az Előnézeti kép megmutatása is ki van pipálva (baloldalt alul), amelyet a képablakban láthatunk. Most éppen ebben a csatornában fogunk dolgozni. Ha az eredetileg látható egyenesünk valamelyik pontjára kattintunk, akkor húzássa változtatni tudunk a függvény lefutásán, és a képablakban figyelhetjük a változásokat. Ha nem tetszik az eredmény, akkor kattintsunk a középen felül látható, Csatorna visszaállítása feliratú gombra, és kezdhetjük a próbálkozást elölről, tiszta lappal. A példabeli gomb módosítása a mellékelt ábrán látható görbelefutással készült. Eredménye a 10. ábrán látható.

10. ábra

Ha felirat nélküli gombot akarunk készíteni a szöveges linkünkhöz, akkor a további, szövegkészítési lépéseket ki is hagyhatjuk.

11. ábra

A szövegíráshoz a képablakban állva nyomjuk le a t (text, azaz szöveg) gyorsbillentyűt, vagy az Eszközök közül válasszuk ki a Szöveget. A munkaablakunkban válasszuk az Eszközbeállítások fülét, hogy a szövegünk paramétereit beállíthassuk.

Most meghagytam az alapértelmezett Sans betűtípust, és 18-as méretet. Ha más betűfajtát akarunk, akkor a Betűkészlet melletti négyzetbe kattintva legördülő menüből válasszuk ki a nekünk tetszőt, a Méret felirat melletti beviteli mezőbe pedig felülírással írjuk át a betűméretet. A többi beállítást meghagyhatjuk változatlanul. A szövegszín automatikusan az előtér színe lesz, ami most fehér (hacsak át nem állítottuk a Háttér rétegünk átfestésekor), de most mindegy is, hogy milyen színnel írunk, csak egy számít: hogy üssön el a mögötte lévő Háttér réteg színétől.

12. ábra

Ezután kattintsunk a képünkben nagyjából oda, ahová a szüvegünk első betűjének bal felső sarkát képzeljük, mire felbukkan a jobbra látható ablak, a GIMP saját kis szövegszerkesztője. Gépeljük be a szövegünket, jelen esetben az ENTER-t. Ha nem tetszik a betűtípus, vagy a méret, akkor a munkaablakban próbálkozzunk más beállításokkal, majd kattintsunk a Szövegszerkesztő ablakába, mire a képablakunkban frissülni fog a látvány az új értékekre. Ha viszont meg vagyunk elégedve az eredménnyel, akkor nyomjuk le a Bezárás gombot a szövegszerkesztő ablakában. Ezután a billentyűzetünk kurzornyilaival a helyére tolhatjuk a szövegrétegünket, amelyet automatikusan egy új, átlátszó alapú rétegbe rak le a GIMP, és a réteg nevének a szövegünket fogja adni.

13. ábra

A szöveges rétegünk éppen csak akkora, hogy beleférjen a szövegünk, a réteghatár pedig szaggatott vonallal látszik, ha a képablakban a Nézet alatt be van kapcsolva a Réteg-határvonal megjelenítése. Ezt a réteget külön szeretnénk kezelni a többitől, ezért ne fésüljük rá az alatta lévő, Gombtest nevű rétegünkre, hanem ehelyett a képablakban a Réteg címszó alatti, a Réteg kép-méretűvé alakítása paranccsal hozzuk a többi réteggel azonos méretűre, amitől a szövegünk mérete és helye nem fog változni, csak a körülötte lévő átlátszó terület lesz nagyobb.

14. ábra

Ha a munkaablakunkban a Rétegek fülére kattintunk, akkor láthatjuk, hogy mink is van eddig. Legalul a fekete színű Háttér réteg, fölötte a fekete-fehérré alakított Gombtest, és legfölül az önálló rétegnek meghagyott, ENTER szöveget tartalmazó réteg.

15. ábra

A legfelső, ENTER nevű szövegünk az aktív réteg, ennek a rétegsora van megjelölve fehértől eltérő színnel. Ha a szövegünket érdekesebbra szeretnénk alakítani valamilyen átfestéssel, akkor először ki kell jelölnünk a betűink körvonalait. Ehhez folyamodjunk a szín szerinti kijelöléshez. A képablakban állva (kattintsunk annak címsorára, ha nem az volna az aktív ablakunk) nyomjuk le a Shift+o billentyű-kombinációt, vagy a Kijelölés menüjéből válasszuk a Szín szerinti kijelölést.

Ha a munkaablakban az Eszközbeállítások fülére kattintunk, akkor láthatjuk ennek beállítási lehetőségeit. Pipáljuk ki a Lágy szélek melletti kis négyzetet, és a lágyítás sugarára állítsunk be 2,0-es értéket, hogy a betűink széle majd ne legyen recézett. Az átlátszó területek kijelölésének lehetősége alapértelmezésben be van kapcsolva, amire szükségünk is lesz. A többi adaton se változtassunk, hanem a képablakban kattintsunk a betűink körüli átlátszó terület tetszőleges pontjára (a képablakban ezt feketének fogjuk látni, mert a legalsó fekete Háttér réteget látjuk a fölötte lévő rétegek átlátszó részeinek köszönhetően). Fordítsuk meg a kapott kijelölést: nyomjunk Ctrl+i-t, vagy a Kijelölés alatt Válasszuk az Invertálást.

16. ábra

Most megint nyomjuk le az l (L, mint Lajos) billentyűt, vagy a képablakban az Eszközök menüjéből a Festőeszközök közül válasszuk a Színátmenetet. A munkaablakban kattintsunk a Színátmenet felirat melletti téglalapba, és a legördülő menüből válasszuk ki az Előtérből a háttérbe RGB, azaz jelenleg fehérből feketébe átmenő festési módot. A lefutás formája maradjon lineáris, de az Ismétlés menüjéből most a Háromszöghullámot válasszuk ki, mert középen domborodónak tűnő feliratot próbálunk készíteni.

17. ábra

A képablakban kattintsunk a kijelölésünk felső határvonalára, majd húzzuk le a kurzort nagyjából a szövegünk közepéig, és ott engedjük fel az egér gombját. A háromszöghullám-ismétlésnek köszönhetően a szövegünk a felső peremétől a közepéig fehérből feketébe egyre sötétül, majd onnan az aljáig megint világosodni fog, egészen a fehérig.

Hogy jobban kitűnjön a szöveg a háttérből, duplázzuk meg az ENTER rétegünket. A Rétegek munkaablakunkban az alsó gombsorból kattintsunk balról a negyedikre, mire lesz egy negyedik, ENTER#1 nevű rétegünk is. Ennek Módját, a Módhoz tartozó legördülő menüből állítsuk Kivetítésre, az Átlátszatlanságát pedig hagyjuk meg 100%-nak. Most a képablakban a Réteg menüjéből válasszuk az Összefésülést lefelé, hogy megint csak 1 darab ENTER rétegünk legyen, de az jobban látsszon a gomb teste előtt. Ha a Rétegek ablakban rákattintunk a Gombtest nevű rétegre, hogy ez legyen az aktív, és annak az Átlátszatlanságát levisszük pl. 75%-ra, akkor a 17. ábrán látható eredméynhez jutunk. Mindazonáltal ezen utólag még változtattam, mert nekem jobban tetszett az a változat, amikor a Gombtest réteg Módját végül is átállítottam Szemcsés kivonásra, és visszavettem az átlátszatlanságát 100%-ra. Ez utóbbi maradt a végleges változatban.

Innentől kezdve két irányban mehetünk tovább: vagy két külön képet csinálunk, és egymás mögé téve a honlapunkon váltakozva jelenítjük meg aszerint, hogy ráállunk-e a kurzorral, vagy sem, vagy pedig egyetlen képen belül megduplázzuk az összes rétegünket, hogy két gombnyira fussa belőlük, de az egyik gombhoz még fényt is adunk a rétegek egyesítése előtt. Ebben a tutorialban a kétféle út egyesítését mutatom be, mert azzal egy csapásra midkét végeredményhez könnyen eljuthatunk.
Kezdjük tehát a képünk megduplázásával.

A képablakban állva nyomjunk Ctrl+d-t (d, mint duplicate, azaz kétszerezés), vagy a Kép legördülő menüjéből hívjuk meg a Kétszerezést. Erre a program feldobja egy új, Névtelen című ablakban a képünk másolatát. Ezt mentsük el valamilyen más néven (Fájl alatt Mentéssel), pl. vilagitogomb1.xcf néven. Most ezen fogunk dolgozni.

Ha piros fénnyel akarjuk jelezni azt, hogy a gombunk aktiválva lett, akkor ezt korlátozzuk a gombtestre, azaz színezés előtt jelöljük ki azt, hogy csak arra terjedjen ki a festés, de a környezetére ne. A Rétegek ablakban kattintsunk a Gombtest rétegsorára, majd a Shift+o billentyű-kombinációval megint hívjuk meg a szín szerinti kijelölést, vagy a képablakban a Kijelölés menüjéből válasszuk a Szín szerintit. Ezután kattintsunk a képablakban valahová a gomb körüli területre, majd fordítsuk meg a kijelölést a Ctr+i billentyűk lenyomásával, vagy a képablakban a Kijelölés alatt válasszuk az Invertálást. Ezután a Rétegek ablakában kattintsunk a Háttér réteg sorára, mert majd arra fogunk piros fényt vetíteni.

18. ábra

Állítsunk be tehát a piros színt is. A munkaablakunkban kattintsunk a Színek fülére. Ha a Wilber-fejes gomb van lenyomva, akkor a 18. ábrán látható kép fogad bennünket. Kattintsunk a nagy négyszögbe, és húzással állítsuk a szálkeresztet egy nekünk tetsző pirosra, amely balra alul látszani is fog az előtér színét mutató téglalapban.

17. ábra

Most még a színátmenetet is be kell állítanunk. Ehhez nyomjunk l-t (L, mint Lajos) a billentyűzetünkön, vagy a képablakban az Eszközök menüjéből a Festőeszközök közül válasszuk ki a Színátmenetet. A munkaablakunkban kattintsunk az Eszközbeállítások fülére, és abban pedig a Színátmenet melletti téglalapba. A legördülő menüből most az Előtérből átlátszóba átmenetet válasszuk. A lefutás Formájára válasszuk ki a Sugarast a Forma legördülő menüjéből, az Ismétlést pedig állítsuk vissza Nincs-re.

A képablakban álljunk a kurzorral a 100,80 koordinátára, kattintsunk, majd húzzunk egy szakaszt 100,34 koordináta értékekig, amelyek a képablak bal alsó sarkában olvashatók le. A sugaras lefutásnak, és a kifestés gombtesten kívüli indításának köszönhetően egy kifelé halványuló körszelet-szerű, piros fényű megvilágítást kap a gombunk. Most már megszüntethetjük a kijelölést: a képablakban a Kijelölés menüjéből válasszuk a Semmit.

A további műveleteket mindkét képünkön hajtsuk végre, a vilagitogomb.xcf nevű, "sötét" képünkön, és a vilagitogomb1.xcf "világító" változaton is. A képablakaikban a Kép menüjéből hívjuk meg az Egy réteggé lapítás funkciót. Nyomjuk le a billentyűzetünkön az r-t (rectangular, azaz négyszögletes), vagy a képablakban az Eszközök alatt a Kijelölőeszközök közül válasszuk a Téglalap-kijelölést. Amikor utoljára használtuk (l. 5. ábra), akkor lekerekített sarkokat állítottunk be rajta, 10-es sugárral. Most viszont szögletes sarkokra lesz szükségünk, mert végső méretre vágjuk a képeinket, tehát a Lekerekített sarkok melletti négyzetbe kattintva tüntessük el onnan a pipát. Maradjon viszont bekapcsolva a Kiterjesztés a középpontból, valamint a Rögzített méret is, de annak értékét írjuk át az eddigi 100x30-ról 105x35-re, hogy a gombtestünk körül azért legyen még valamennyi biztonsági rátartás is (hacsak ez nem ellenkezik a tervezett gombunk jellegével, elhelyezésével).

Most kattintsunk a kurzorral valahol a képeinkbe, és húzással vigyük a kurzort a (képablak bal alsó sarkában leolvasható) 100,50-es koordinátákra, majd a Kép címszó alatti menüből válasszuk ki a Vágás a kijelölésre utasítást, hogy a fölösleges fekete hátterektől megszabaduljunk. Ezután mindkét képnél megszüntethetjük a kijelölést a Kijelölés alatt a Semmit sorra kattintással.
Ezután mindkét képet mentsük el olyan kiterjesztéssel, amilyennel meg akarjuk jeleníteni a világhálón (pl. .gif, .jpg, .png).

Ha valamilyen, két képet felhasználó megjelenítési móddal dolgozunk, mint amilyen az oldal tetején látható, javascriptes megjelenítésű, keret nélküli Belépés gomb, akkor már készen is vagyunk a munkánk képszerkesztős részével. Ha viszont egyképes váltógombot akarunk, mint az Enter feliratú, CSS-sel megjelenített gombok, akkor most még össze kell varrnunk a két képünket.

18. ábra

Ha mindkét képünk, a vilagitogomb.xcf és a vilagitogomb1.xcf is meg van nyitva, akkor kattintsunk a vilagitogomb1.xcf címsorára, hogy ez legyen az aktív képablakunk, és nyomjunk Ctrl+C-t, amivel vágólapra másoljuk a második, piros fényű képünket. Ezután kattintsunk a vilagitogomb.xcf, a sötét gombunk címsorára, és nyomjunk Ctrl+V-t, amivel bemásoljuk a második képet az első képünkbe, ahol az lebegő kijelölésként fog megjelenni.

Ha a munkaablakban a Rétegek fülére kattintunk, akkor látni is fogjuk. Most a jobb egérgombbal kattintsunk ennek a (Beillesztett rétegnek) a rétegsorára, az erre legördülő menüből pedig válasszuk az Új réteg funkciót, mire ez a gombképünk ugyanolyan réteggé fog alakulni, mint az alatta lévő.

A két képünknek viszont nem egymás fölött, hanem majd egymás mellett kell lenniük a felhasználhatósághoz, ezért meg kell növelnünk a képünk méretét, de úgy, hogy az ábráink arányai nem változzanak meg. Erre szolgál a rajzvászon funkció. A képablakban a Kép legördülő menüjéből válasszuk a Rajzvászon mérete funkciót: felbukkanó ablaka a 19. ábrán látható.

19. ábra

Az aktuális képméret szélességével és magasságával bukkan fel az ablak. A magasságon nem kell változtatnunk, de a szélességen igen, hogy egymás mellett elférjen a két gombunk. Ha meg akarjuk változtatni a méretarányt, mint most, akkor az értékek átírása előtt kattintsunk a Szélesség és Magasság beviteli mezőitől jobbra látható, láncrészletet ábrázoló gombra, mert ekkor a program nem fogja az egyik megváltoztatott mérethez automatikusan arányosítani a másikat, hogy megtartsa az eredeti méretarányt. Írjuk felül a Szélesség adatot 210-re, azaz az eredeti duplájára, majd kattintsunk a Középre gombra. Első lépésben láthatóan középre kerül a felül látható, piros fényű gombképünk, de mi azt szeretnénk, hogy teljesen a jobboldalon legyen. Ezért az Eltolás alatti X-tengelyhez tartozó léptetőnyíllal toljuk jobb szélső állásba a gombképet, azaz növeljük 105-re annak bal szélső X-koordináta értékét, majd nyomjuk le a Méret módosítása gombot.

A Rétegek munkaablakunkban láthatjuk, hogy a felső, Beillesztett réteg nevű rétegünkben van a piros fényű gomb, alatta, a Háttér rétegben a kivilágítatlan, sötét gomb. Kattintsunk a felső, Beillesztett réteg rétegsorának bal szélén látható, szemet ábrázoló ikonra, hogy ez a réteg láthatatlanná váljon, majd kattintsunk az alsó Háttér rétegre. Ezután kattintsunk a képablakunk címsorára, hogy ez legyen az aktív ablakunk, és nyomjuk le az m (move, mint mozgatás, költöztetés) gyorsbillentyűt, vagy az Eszközök menüjéből az Átalakítóeszközök közül válasszuk ki az Áthelyezést. Azért kellett a felső réteget láthatatlanná tennünk, mert különben ez a funkció nem működne az alsó rétegen, hanem a felsőt mozdítaná el.

Kattintsunk a képablakban valahová a képünkre, és az alsó réteget toljuk el egészen a kép bal széléig. Hogy pontosan a helyére tudjuk rakni, érdemes a képet kinagyítanunk. A képablak alsó sorában a legördülő menüből válasszuk ki pl. a 400%-os nagyítást, és a gördítősávokkal álljunk a kép bal alsó sarkára. Az áthelyezéssel addig húzzuk az alsó rétegünket, amíg pontosan nem illeszkedik a sarka a kép határvonalaihoz.

Most megint kattintsunk a felső Beiilesztett réteg szemikonjának helyére, mire az újra láthatóvá válik, a képablakban pedig a Kép menüjéből válasszuk ki az Egy réteggé lapítás utasítást.

Most már csak el kell mentenünk nekünk tetsző formátumban és névvel a duplagombos képünket a képablakban a Fájl menüjéből meghívható Mentés másként paranccsal. A tutorialban szereplő kép vilagitodupla.jpg lett.
Itt van tehát az eddig elkészült három képünk:

vilagitogomb.jpg 105x35 px

vilagitogomb1.jpg 105x35 px

vilagitodupla.jpg 210x35 px

Most ezeket fogjuk vagy CSS-sel, vagy Javascripttel beilleszteni a honlapunkba.

CSS-példa egy váltógomb beillesztéséhez

Az alábbi példa egy darab gomb beillesztésére alkalmas. Ha több gombot is meg akarunk jelentetni egyetlen html oldalon belül, akkor ...2, ...3 stb. aljelzésekkel meg kell ismételnünk a megadott programblokkokat. Ha egész menüt akarunk így készíteni, akkor az már összetettebb kódot kíván, amelyre számos példa látható a világhálón. Ez a honlap nem honlap szerkesztéssel foglalkozik, úgyhogy menükészítésre nem fogok kitérni. Nem foglalkozom azzal a variációval sem, amikor nem a gombokba építjük be a szövegünket, hanem html-lel adjuk meg a linket, szöveges formában, hogy az a gomb fölött jelenjen meg.

A HTML-oldalunk fejrészébe, a nyitó <head> és a záró </head> közé illesszük be az alábbi részletet:

<head>
<style type="text/css">

a.rollover1, a.rollover1:visited { 
   display: block; 
   width: 105px; 
   height: 35px; 
   text-decoration: none; 
   background: url("mappa/vilagitodupla.jpg"); 
} 

a.rollover1:hover { 
   background-position: -105px 0; 
}
</style>   

</head>

A horgony (anchor) stílusformázásakor a szélességre a képünk felének a méretét adjuk be, jelen esetben 210/2=105-öt, az url-re pedig a képünk elérhetőségi útvonalát és nevét. Ha a kurzor nem áll rajta a képen (onmouseout állapot, azaz a, és a:visited), akkor a félszélesség miatt csak a képünk bal fele látszik, mert ennyit jelenítettünk meg belőle. Ha viszont ráállunk a kurzorral (onmouseover, azaz a:hover), akkor a képszélesség felével balra toljuk a megjelenítést (-105), és ekkor a képünk jobbfele fog látszani, a világító gomb.

A HTML-oldalunk body részébe, a nyitó <body> és a záró </body> közé pedig rakjuk be a képünket:

<div style="float: left; padding: 20px;">
<a href="valami.html" class="rollover1">&nbsp;</a>
</div>

Ha máshol nem tettük meg, akkor itt stílusformázhatjuk pl. egy div elemben a képes linkünk megjelenítését (kékkel jelölt részlet). A horgony (anchor) elembe berakhatjuk a linkünket, és csak hivatkoznunk kell benne a CSS osztályra, classra, amely az első képünknél lehet rollover1, a másodiknál rollover2 stb., miután azt a CSS kódunkban előzetesen beállítottuk.

Fel

Javascript-példa egy váltógomb beillesztéséhez

A Javascriptes példa megjelenítéséhez két külön képben kell lenniük a gombjainknak. Az egyik a "sötét" állapota a gombnak, amely jelen esetben a vilagitogomb.jpg (105x35)-ös kép, a másik a gomb "világító" állapota, a vilagitogomb1.jpg (105x35).

A képeinket tegyük egy mappába, pl a mappa1 nevűbe, és mindenképpen adjunk nevet (name) az alapképnek, ami magának a mappának a neve, azaz itt és most mappa1. Ha ugyanezen az oldalon további gombokat is meg szeretnénk jeleníteni, akkor azokat a mappa2, mappa3 stb. mappába tegyük, és képnévnek (name) mappa2-t, mappa3-at stb. adjunk be.

Ha máshol nem tettük meg, akkor itt stílusformázhatjuk pl. egy div elemben a képes linkünk megjelenítését (kékkel jelölt részlet).

A HTML-oldalunk body részébe, a nyitó <body> és a záró </body> közé rakjuk be a képeinket:

<div style="float: left; padding: 20px;">
	<a href="valami.html" onmouseover="document.mappa1.src='mappa1/vilagitogomb1.jpg';
 return true" onmouseout="document.mappa1.src='mappa1/vilagitogomb.jpg';">
<img name="mappa1" src="mappa1/vilagitogomb.jpg" width="105" height="35"
 alt="Világító gomb." border="0" />
	</a>
</div>

A kép előállításához GIMP for Windows 2.4.2 képfeldolgozó programot használtam a sourceforge.net jóvoltából.