Kona Wikia
Register
Advertisement

Így készült[]

Színváltó gombokból számtalan különféle variáció készíthető, természetesen kisebb-nagyobb méretben.

A baloldali felső "ENTER" feliratú gomb készítését ismerteti ez a leírás. A korábbi, e témával foglalkozó tutoriallal ellentétben azonban most megadom azt a CSS (Cascade Style Sheets) kódot, illetve Javascript kódot is, amivel a váltógomb kép, vagy képek be lettek illesztve ebbe az oldalba.

A módszer lényege, hogy két képet is készítünk: az egyik a sötét, a másik pedig a világító gombot ábrázolja, mely csak akkor jelenik meg, ha ráállunk a kurzorral a képre. A kiegészítő CSS, vagy Javascript kódok, csak a példa kedvéért, két különböző feldolgozásra alapulnak. A CSS-sel megjelenített váltógomb voltaképpen egyetlen képbe lett összefoglalva, és megjelenítésének szerzője, Jacob Wyke szerint számos böngészőn működik. (én csak FF2-ben és IE7-ben próbáltam ki, azokban jó). A javascriptes megoldásban az alaphelyzetben megjelenő "sötét" gomb, és a második, "világító" gomb két külön képben van. Ha valaki nem tiltotta le a Javascript megjelenítését a böngészőjében, akkor a megadott kód is működik FF2-ben és IE7-ben. (A többire nincs adatom.)

VillogoGomb 1

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.

VillogoGomb 2

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.

VillogoGomb 3

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.

VillogoGomb 4

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.


VillogoGomb 5

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.

VillogoGomb 6

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.

VillogoGomb 7

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.

VillogoGomb 8

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.

VillogoGomb 9

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ó.

VillogoGomb 10

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.

VillogoGomb 11

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.

VillogoGomb 12

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.

VillogoGomb 13

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.

VillogoGomb 14

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.

VillogoGomb 15

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.

VillogoGomb 16

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.

VillogoGomb 17

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.

VillogoGomb 18

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.

VillogoGomb 19

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.

VillogoGomb 20

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ó.

VillogoGomb 21

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:


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"> </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.


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>
Advertisement