A képek váltakozását egy menüben (rollover effekt) a legtöbben javascript segítségével oldják meg, talán a régi beidegződésnek köszönhetően. Pedig van már erre egy sokkal szebb, könnyebb megoldás is CSS felhasználásával, amihez mindössze az alábbi leírást kell elolvasni és kipróbálni. :) – kiegészítés: Harder
A feladat az, hogy JavaScript nélkül hozzuk létre demo oldalon is látható eredményt.
A hozzávalók: :)
- egy kép, melyen rajta van a gomb két változata (az onmouseover és az onmouseout állapotokra)
- egy megfelelő html és css kód
Ebben a példában a kép így néz ki:
A képen látható, hogy a gomb két állapota egy képen van rajta. (Aki használ valamilyen 4GL fejlesztőeszközt, az már találkozhatott ilyen rendszerű képpel.
A CSS kód:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | html { background: #c0c0c0; } .button a { background: url(tip_01.jpg) no-repeat; width: 300px; height: 60px; display: block; margin: 0 auto 0 auto; text-decoration: none; text-indent: -100px; overflow: hidden; } .button a:hover { background-position: 0 -59px; } |
A css kódban az egyik legfontosabb dolog, hogy az adott kép szélességét és csak a kép magasságának a felét állítsuk be, a kép alja nem fog látszódni. (width és height paraméterek)
A margin-nal középre igazítottuk a gombokat.
Ha megnézed a HTML kódot, ott látni fogod, hogy a képet nem is rakjuk ki, azt a css-re bíztuk, de a linket befoglaltuk egy ilyen gombot felrajzoló stílusosztályba. Ennek a linknek a szövegét kivesszük a látható térből, a példában mínusz 100 pixellel balra plusz használunk egy overflow:hidden-t (túlcsordulás elrejtés).
A trükk lényegi része most jön.
Amikor a .button osztályba sorolt elem fölé érkezik az elem, akkor legyen valami változás (.button a:hover). A kódban látható, hogy a képet, ami jelen esetben háttérképnek van beállítva, ezen eseménykor függőlegesen felcsúsztatjuk. Elvileg, ha jól csináltuk meg a képet, akkor pont a kép magasságának a felével kell csúsztatni, de lehetnek apróbb képszerkesztési, illetve vágási problémák, ezért ezt itt korrigálhatjuk. (Az én példámban is látható, hogy 1 pixelnyit tévedtem, és ezt az eredeti 60 pixel helyett csak 59 pixellel kell feltolni).
A HTML kód:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu"> <head> <title> CSS Trükk </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Language" content="hu" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <div id="page"> <div class="button"><a href="#" title="CSS TRÜKK">Link1</a></div> <div class="button"><a href="#" title="CSS TRÜKK">Link2</a></div> <div class="button"><a href="#" title="CSS TRÜKK">Link3</a></div> </div> </body> </html> |
Ha megértetted a példaprogramot, akkor innentől kezdve nem szükséges JS-el rollover effektust készítened.
Előnye a JS-es verzióhoz képest, hogy (szerintem) jóval egyszerűbb és már az első mouseover eseménykor pillanatok alatt végre fog hajtódni a képváltás. Ez azonban azt is jelenti, hogy egyszerre nagyobb méretű képeket kell betölteni, ezáltal kicsit lassabban jelenhetnek meg ezek a gombok.
szerző: Delawer
honlap: http://delawer.freeweb.hu
Hi! Ez nagyon tetszik! Egy időre abbahagytam a honlap-heggesztést és mire visszazökkenek, mindenki CSS-el dolgozik, már értem hogy miért. Nem csak sokkal egyszerűbb, de így sokkal letisztultabb kódot kapok, amit a keresők is szeretnek – rólam nem is beszélve :)
Az trükköt alkalmazni fogom a http://www.kvitel.hu oldalon (ez jelenleg js-es), kíváncsi vagyok a htm fájl méretbeli változására!
Alapjaiban változott meg a véleményem a js-ről. Éljen a css! Thnx, Delawer! Köszönöm!
Sziasztok!
Nagyon jó ez a trükk, csak az a gond, hogy IE alatt nem működik teljesen megfelelően, kicsit ugrál a kép. A demo oldalon is, meg amikor magamnak próbálgattam itthon, akkor is.
Ki lehet ezt valamivel küszöbölni?
köszönöm a választ előre is
Hali!
Előszöris, köszönöm, hogy olvassátok ezt mostanság már kissé régivé avanzsált cikket (bár olyan hű de nagyon rossznak nem mondanám, hiszen lényegében ma is így csinálom a dolgokat)
Ami Balage problémáját illeti, az sajnos az IE6 egyik hibája (nahh igen, az IE6 2001 óta masszívan tartja magát, baromi erősen itt rekedt nekünk:) ), hogy a háttérképet ebben az esetben villogtatja.
A problémát több oldalon is igyekeztek már megmagyarázni, illetve megoldani, pl.:
http://www.fivesevensix.com/studies/ie6flicker/
illetve anno az Adobe is bedobott egy trükköt:
try {
document.execCommand(‘BackgroundImageCache’, false, true);
} catch(e) {}
Hey!
Tetszik a leírás, hasznát is vettem. Nem vagyok szakértő igazából, de lenne egy kérdésem:
Így is meg lehet oldani?
.button a:hover {
background: url(tip_02.jpg) no-repeat;
}
Ebben az esetben 2 kép van. Így nem egyszerűbb / érdemesebb? Én nem tudom…
Igen ilyen módszerrel is működik, de akkor számíts arra, hogy bevillan(hat) a kép – ameddig kicseréli először – másodszorra ha felé viszed akkor már jó, de erre is van valami hack, hogy előre betöltse. Nálam is így van megoldva.
ie6-al már nem szabad foglalkozni, azért ragad be mert a fejlesztők foglalkoznak vele. Már egy ideje a google sem támogatja. A nagyok megtették a kezdő lépést hogy feledésbe merüljön. Amíg a fejlesztők dolgoznak ie6ra addig nem lesz a “mélyentisztelt publikum” között sem sok változás. Én már lassan fél éve nem veszem figyelembe ie6-ot. e-kereskedelemmel foglalkozom ahol van jópár olyan megoldás amit alapból ie6 les*ar. “Nem repüljük körbe a világot egy ejtőernyővel…”
Sajnos amíg a userek jelentős %-a ezt használja, kell vele foglalkozni. Privát honlapnál megteheted, hogy nem foglalkozol vele és max bukod a látogatóid egy részét, de kereskedelmi oldalnál nem teheted meg, hogy leszarod a látogatók egy jórészét.
Fejlesztőként max annyit tehetsz, hogy IE6-ra már plusz pénzért buildelsz pl.
Sziasztok!
Olyan kérdésem lenne, hogy a Dreamweaver-el elkészítettem a honlapomat.
Wamp szerverrel megnéztem és leellenőriztem és működnek a Rollover Image-el betett menüpontok, de miután feltöltöm ( jelenleg ATW-s helyre ) a linkek működnem de a Hover állapotom nem működik.
Mi lehet a baja?
Vagy a képet nem tetted fel a szerverre, vagy rossz a hivatkozás ami rámutat. Más hiba nem nagyon lehet.
Helló!
látom elég régóta posztoltok ebbe a topikba, remélem még lesz itt olyan olvasó aki tud segíteni. nálam frankón müxik egy problémára nem tudtam rájönni még hogy ebből hogyan tudok vízszintes menüt csinálni. van ötlete valakinek? köszike előre is