Villogó Gomb

## Í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.)

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:

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>

```