Rychlé rollovery pro textové elementy
V březnu minulého roku jsem se poprvé setkal s technikou rychlých rolloverů použitenou i pro textové elementy. Už ani nevím, proč jsem o ní zatím nenapsal :-).
Jak fungují rychlé rollovery bez dodatečného načítání obrázku ví už snad každý koder, kterém je XHTML a CSS denním chlebem. Stokrát omývaná technika, která se stala základem většiny obrázkových menu.
Pro lepší ilustraci se mrkněte na stránku s příklady – nejdříve najeďte myší nad příklad 1 a pak nad příklad 2. V obou příkladech jde o jednoduchý odkaz, v jehož pozadí je šipečka z motivu zimní edice tohoto blogu. V příkladu 1 byly použity dva obrázky, a tudíž mají některé prohlížeče při prvním najetí nad položku menu zpoždění, v němž nahrávají druhý obrázek.
Příklad 2 toto prodlení nemá. Proč? Protože už máte obrázek v CACHE z příkladu 1! Hehe – kecám. Je to proto, že byl použit pouze jeden obrázek. Trik je v tom, že obrázek z příkladu 2 obsahuje oba stavy a při najetí myší se pouze pohne polohou pozadí daného elementu.
Rozdíl oproti standardním rychlým rolloverům je v tom, že obrázky neumístíte hned vedle sebe, ale necháte mezi nimi dostatečnou mezeru pro text. Velikost mezery záleží na konkrétním layoutu webu – může to být 100px, jindy 1000px nebo dokonce 10000px (tisícovka většinou stačí).
Zarovnání doprava
A ouha. Když je obrázek zarovnán doprava od textu, tak nelze použít horizontální umístění stavů vedle sebe, protože se vám hned zobrazí stav:hover (příklad 3). Řešením budiž změnit horizontální polohu :hover stavu na vertikální (příklad 4) a z široké nudle udělat nudli dlouhou.
Pomohlo to někomu, nebo jen omílám staré známé věčné pravdy? Kód a obrázky jednotlivých příkladů nechť si zájemci extrahují z příkladové stránky – přece to nebudu psát dvakrát :-).
Komentáře
Mě už ne, ale někomu určitě ano. Jinak když jsem se to naučil, tak jsem předělával devět webů…
asi jsem to nepochopil, v opeře příklady nějak nefungují, takže neví co to má jako dělat, nepřijde mi na tom všem nic světoborného
Před časem jsem napsal tutoriál na takový pokročilejší příklad – rollover pro libovolné množství náhledů, včetně čudlíků pro ty náhledy, pomocí jednoho obrázku.
No já nepochopil proč je tam ta mezera mezi oběma obrázky? Má to být nějaké vylepšení nebo to bylo vytvořeno z pouhé nudy? :-D
[6] – tohle je něco jiného – tvoje odkazy mají přesné rozměry, moje jsou text (i když je to principielně totéž)
[7] – ano, však je to to samé.. jen s větší mezerou :-)
[8] – doporučuju vlastní test.. udělej si totéž bez mezery a pak zvětš písmo..
[10] – Jasný, to nemělo být, jakože jsem psal to samé, jen mi to přišlo jako související článek.
Jinak k té mezeře mezi obrázky. Safari (včetně 2.0.4) má problém
s interpretováním obrázků, kde není pod stavem ještě mezera – nějak
to spojí. Příklad: http://www.networkmanagement.cz/cenik.php
ty odkazy vpravo dole mají oba stavy šipky v Safari viditelné najednou,
protože tam právě není ta mezera.
Problem je v tom, ze problem je v IE6. Tam jakykoliv preloader nefunguje, protoze IE nema rad obrazek v pozadi odkazu. Takze v nem to vzdycky tak skarede blikne. To, kdyby nekdo dokazal vyresit…
Pro zajímavost, víte vůbec co obnáší onen obávaný a všeobecně zavrhovaný „preload“? Vždy jsem si pod tím představoval divoký javascript, zbytnělé HTML se skrytými tagy IMG nebo bůhvíco ještě odpornějšího. A ono je to vlastně až bolestně prosté, a zdaleka to není tak hnusné (jenom trochu potměšilé): vlastně stačí v CSS všechny načteníhodné obrázky přiřadit jako background-image … „něčemu“. Ano, všechny. A pak tomu „něčemu“ klidně žádné pozadí nedat :) Browser si (jak mi před časem vysvětlil dgx) sáhne (a stáhne) všechno, co kde najde; bez ohledu na to, jestli se to v danou chvíli může někde zobrazit nebo ne. (Nemusí to myslím platit pro object-y, ale to je jiné téma). Myslím, že takové ‘body { background-image: url(pic1); background-image: url(pic2); 3,4 … background-image: none; }‘ by teoreticky mělo fungovat (nezkoušel jsem to). Jo a nevymyslel jsem to; narazil jsem na to href=„http://snipplr.com/view/2122/css-image-preloader/“ rel=„nofollow“>http://snipplr.com/view/2122/css-image-preloader/ poprvé asi tady href=„http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/“ rel=„nofollow“>http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
[12] tak tak. Ale projevuje se to myslím jenom za specifických okolností (které nemůže webdesignér ovlivnit, třeba zakázaná cache myslím). Možné řešení nadhodil už pixy: dát „aktivní“ pozadí nikoliv odkazu, ale jeho obalu a aktivní pozadí odkazu schovávat. Samozřejmě, ve většině případů je to bohužel nepoužitelné.
Něco to pomohlo, wtz.