:hover receptek képes linkekhez

A következő bekezdésekben arról írok, hogy miként érdemes a többállású képhivatkozásokat beágyazni egy honlap forrásába, és rávilágítok az ezzel kapcsolatos ok-okozati tényezőkre is. A haladóknak nem feltétlenül mondok újdonságot, de azért mindenképpen érdemes elolvasni, hogy tudatosuljon bennünk a bemutatott technikák előnyei és hátrányai.

Szerintem már mindenki látott olyan linket, aminek a külalakja megváltozik, ha lenyomva tartjuk vagy csak egyszerűen fölécsúsztatjuk a kurzort. Amikor még CSS nem igazán létezett, ezeket főként a JavaScript eseménykezelőivel oldották meg. Amióta viszont létezik a CSS-ben a :hover, azóta teljesen feledésbe merültek a JavaScriptes megoldások, ami persze egyáltalán nem baj, hiszen a CSS natív megoldást biztosít. Ebben a bejegyzésben két megoldást mutatok be, egy jót és egy kevésbé jót. Azért kezdem a jobb megoldással, mert így a végén könnyebben rá tudok mutatni a másik megoldás lényegére. A példák teszteléséhez az alábbi három darab képre szükségetek lehet:

1. Példa:

Ezt a megoldást két külön képpel kezdem, mert a kevésbé gyakorlottak elsőre általában így látják logikusnak, de folyamatosan finomítva a végén már csak egyetlen képfájlt fogok használni. Most pedig gyűjtsük össze röviden a példához tartozó elvárásainkat:

• A scriptünk legyen keresőbarát és böngésző független!
• A képlink legyen látássérültek számára is “olvasható”!
• A :hover esemény bekövetkezésekor felbukkanó ikon betöltése a lehető legrövidebb idő alatt történjen meg!
• A képek letöltése népszerű honlap esetén ne terhelje le a szervert!

Az első két kikötés ebben a példában egy kalap alatt elintézhető, de tervezéskor külön egységként kezelendő, ezért választottam őket szét a felsorolásban. Így a kódjaink a következőképpen festenek:

HTML Kód:

<div id="Armada">
<a href="http://armadamusic.nl/" target="_blank">Armada Music</a>
</div>

CSS Kód:

#Armada a    {
 background-image: url(./ArmadaIconBlue.png);
 background-position: center;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a:hover    {
 background-image: url(./ArmadaIconRed.png);
}

Amint a mellékelt ábra mutatja, még nem vagyunk készen, hiszen a link szövege még látható, ami nem túl esztétikus. Ezt úgy tudjuk kiküszöbölni, hogy az <a> tagen belül a link szövegét közrefogjuk egy <span> taggel, majd ezt láthatatlanra állítjuk a display: none; segítségével.

HTML Kód:

<div id="Armada">
<a href="http://armadamusic.nl/" target="_blank" title="Armada Music"><span>Armada Music</span></a>
</div>

CSS Kód:

#Armada a    {
 background-image: url(./ArmadaIconBlue.png);
 background-position: center;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a:hover    {
 background-image: url(./ArmadaIconRed.png);
}
#Armada a span    {
 display: none;
}

Ezzel az első két pontot kihúzhatjuk a listánkról, viszont az utolsó kettőt még nem. Mit gondoltok, mit kellene tennünk ahhoz, hogy a hiányzó kritériumaink is teljesüljenek? Ehhez gondoljuk végig mi történik a megírt scriptünk futása közben. Amikor megnyitjuk az oldalt, a böngészők többnyire csak azokat az elemeket töltik le a látogató számítógépére, melyekre az adott oldal éppen akkor hivatkozik, vagyis a :hover esemény hatására megjelenő képet csak akkor tölti majd be a böngésző, ha a link fölé helyezzük a kurzort. Ha a látogató például a böngészéssel párhuzamosan a teljes sávszélességet kihasználva torrentezik, vagy csak szimplán lassú az internetkapcsolata, akkor annyit fog látni, hogy eltűnik az a kép, amire ráhelyezte a kurzort, és szépen lassan töltődik be helyette egy másik. Ezt úgy tudjuk megelőzni, hogy a két képfájlt összeillesztjük, így a böngésző nagyobb valószínűséggel a második képállást már azelőtt betölti, hogy a felhasználó a kurzort a képlink fölé csúsztatta volna.

HTML Kód:

<div id="Armada">
<a href="http://armadamusic.nl/" target="_blank" title="Armada Music"><span>Armada Music</span></a>
</div>

CSS Kód:

#Armada a    {
 background-image: url(./ArmadaIconBoth.png);
 background-position: center;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a:hover    {
 /* Innen távolítsd el az előző kódrészletből származó sort! */
}
#Armada a span    {
 display: none;
}

Utolsó lépésként pedig el kell csúsztatni a háttérképet a background-position parancs segítségével.  A center értéket praktikusan kicseréljük pixelben megadott értékekre, ahol az első az X, a második az Y tengelyen történő csúsztatásnak felel meg. (A képek összeillesztésétől függően csúsztathatjuk jobbra-balra és/vagy fel-le egyaránt.)

HTML Kód:

<div id="Armada">
<a href="http://armadamusic.nl/" target="_blank" title="Armada Music"><span>Armada Music</span></a>
</div>

CSS Kód:

#Armada a    {
 background-image: url(./ArmadaIconBoth.png);
 background-position: 0px 0px;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a:hover    {
 background-position: 0px -256px;
}
#Armada a span    {
 display: none;
}

Miért terheli ez így kevésbé a szervert? A böngészők hajlamosak minden képletöltést külön-külön szálon kezelni, amely egy nagy látogatottságú oldal esetén növeli a szerver memóriaigényét. Ezzel az összeillesztős módszerrel részben gátat szabhatunk a böngészők sebesség éhségének. Azért csak részben, mert ezzel azt még nem tudjuk kizárni, hogy egy képet csak egyetlen szálon töltsön le, de ettól függetlenül ez még egy kötelező eszköz a fejlesztő kezében. Továbbá egy gondos összeállítással, és egy jól tervezett forráskóddal tökéletesen szabályozható a lap meghívásakor a képek betöltésének sorrendje. Így például a honlap fejlécéhez tartozó elemek sokkal gyorsabban jelennek meg, mert nem a lábléchez tartozó elemekkel párhuzamosan tölti le azokat a böngészőnk. Álljon itt egy élő példa a YouTube oldalából:

A fentiekből gondolom már többen sejtik a hátrányát, ugyanis egy rosszul átgondolt képösszeállítás esetén előfordulhat, hogy egy adott ikonra jóval többet kell várnunk, mert a képsorozat végén helyezkedik el.

2. Példa:

A második megoldást azokra az esetekre, vészhelyzetekre kísérleteztem ki, amikor sürget az idő vagy megfelelő eszköz híjján nincs lehetőségünk gondosan összeilleszteni a képeket. Ha ilyenkor is profi munkát szeretnénk végezni, akkor JavaScript használata nélkül egy ügyes cselt alkalmazva CSS-el is rábírhatjuk a böngészőt a szükséges képek előzetes betöltésére. Ehhez úgy kell megírni a kódot, hogy a képek fordított sorrendben tökéletesen fedjék egymást, így nincs más dolgunk, mint eltűntetni a felső layert a várt esemény bekövetkezésekor. (Én jellemzően Internet Explorerben tapasztaltam a képek lassú, esetleg felvillanó módon történő betöltését, többek között ezért kísérleteztem ki ezt a második példát.)

HTML Kód:

<div id="Armada">
<a href="http://armadamusic.nl/" target="_blank" title="Armada Music"><span>Armada Music</span></a>
</div>

CSS Kód:

#Armada    {
 background-image: url(./ArmadaIconRed.png);
 background-position: center;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a    {
 background-color: #ffffff;
 background-image: url(./ArmadaIconBlue.png);
 background-position: center;
 background-repeat: no-repeat;
 display: block;
 width: 256px;
 height: 256px;
}
#Armada a:hover    {
 background-color: transparent;
 background-image: none;
}
#Armada a span    {
 display: none;
}

Kérdéseiteket küldjétek be bátran a hozzászólások közé!

Hozzászólás: » 2 « • Írta: Péter (2010/01/25 23:50)