CSS rollover trükk


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:

button

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

Kapcsolódó bejegyzések:
  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Menüt listával? Sokaknak ez már régóta természetes, mások meg vakarják a fejüket, hogy most mi van? Pedig ha belegondolunk miről is van szó? egy menülistáról, a …

  • Ha arra van szükséged, hogy letöltött képeket és hangokat a böngésző ne mentse le a temp könyvtárba, használd az alábbi kódot:Ha azt akarod, …

  • Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak á …

A cikket beküldte: Harder (http://blog.harder.hu)

10 hozzászólás

  1. STX says:

    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!

  2. Balage says:

    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

  3. Delawer says:

    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) {}

  4. 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…

  5. bubu001 says:

    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.

  6. special says:

    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…”

  7. Harder says:

    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.

  8. Zakos says:

    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?

  9. Harder says:

    Vagy a képet nem tetted fel a szerverre, vagy rossz a hivatkozás ami rámutat. Más hiba nem nagyon lehet.

  10. Mywarr says:

    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

Szólj hozzá
a CSS rollover trükk c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>