Egy egyszerű borulás
Visszatérve a tárgya rolloverek. Meg akarom mutatni a legegyszerűbb példa. Hadd emlékeztessem önöket, hogy a borulás az elrendezés nevezzük egy képet, amely változik, ha fölé viszi azt az egérmutatót. A működése ezt a hatást meg kell használni a jól ismert tulajdonsága az úgynevezett linkek lebeg. És mi lenne, ha például meg kell csinálni csak maga a kép formájában kapcsolatokat, de anélkül, hogy bármilyen szöveget. Például a logó. Van egy szép képet, és nem volt szükség, hogy a tetején overlay szöveges linkek. És nem „üres” érvényesítő nem teszi lehetővé a link.
Ahhoz, hogy megoldja ezt a problémát, akkor a tulajdonság a szöveg, az úgynevezett text-indent. amit általában a „vörös vonal”. De megkérem negatív értéket, és elég nagy. Ezután a szöveg lesz rejtve túl a lap szélére az oldalon. Ily módon jönnek elég gyakran, különösen akkor, ha egy kézzel rajzolt logók.
De térjünk vissza a mi juh, azaz borulás. A működési elve az ilyen változó kép meglehetősen egyszerű: a kettős kép készült, az egyik csak a másik alá:
Amint az ábrából látható, a teljes magassága a kép kell még, és hogy az összeg magasságát mindkét kép: 256 + 256 = 512px.
Továbbá, a stílus fájl kérünk az osztály a jövőben is, ami lényegében elvégzi a szerepe a borulás. Számos hotrostey. Először is, az osztály meghatározása nem csak a pont előtt, és közvetlenül hozzá a címkét is:
Másodszor, mi használjuk a képet közvetlenül nem (sem a címkén keresztül img), de csak a háttérben. De! Mivel van egy közös képet, akkor először meg kell valamilyen módon, hogy bebizonyítsa, nem az egész, hanem csak a felső részt. Mert ez az osztály a fenti definiáljuk a következő szabályokat:
a.picture background: url (santa.gif) no-repeat 0 0;
szélesség: 256px;
magasság: 256px;
display: block;
text-indent: -1000em;
>
Mint látható, a háttérben már regisztrált a neve a kép, ismétlés nélküli, de a koordinátákat 0 0. Ez csak a legjobb helyen, és mondd el a böngésző, hogy mit mutat a kép, amire szükség van, kezdve a bal felső sarokban. De meddig? De csak azért, hogy 256px széles és azonos magasságban. És semmi több. Amellett, hogy ez az egész dolog működött rendben, meg kell előírni a leképezési szabály display: block;
A szöveg, mint már mondtam, meg kell elrejteni. Tehát hozzá egy szabály: text-indent: -1000em; Ez az érték több, mint elég, akkor is, ha van egy monitor, átlós 5 méter.
De ez csak a történet fele. Hogyan mutatják a második része a kép? Ehhez adjuk hozzá a következő nagyon rövid szabályt:
a.picture: hover background: url (santa.gif) no-repeat 0 -256px;
>
Voila! Minden egyszerű, mint 2x2. Segítségével az összes ugyanazt a képet, mint a háttér, meg kell változtatni a tulajdonságait hover koordinátáit a rajz. A széles, mint a nulla, így maradtak, de mi meg a magassága a negatív értéke pontosan a fele a képet. Így úgy tűnik, hogy el van rejtve a felső és az alsó megmutatta. Ez minden.
Egy élő példa itt látható