Zobrazení několika druhů výrobků pomocí jednoho obrázku přes CSS

24. května 2007

•

Jako webdesignéři se jistě často setkáváte (nebo budete setkávat) s nutností ukázat vícero druhů výrobků na malém prostoru určeném pro jeden obrázek. Například vícero variant interiéru auta, několik barevných variant téhož svetru nebo vzory na froté ručníku. Technika popisovaná v tomto článku vám tento problém vyřeší velmi elegantně přímo přes CSS a pomocí jediného obrázku.

Funkční ukázky

Protože se v praxi můžete setkat se dvěma variantami výrobků, popisuje tento článek obě dvě:

První varianta je určena k použití v situaci, ve které prezentujete výrobky, které se přímo nekryjí tvarem, jsou různě poskládány, nebo jejich obrázek zabere celou plochu fotografie (například vzorek látky).
Druhá varianta je vhodná právě pro příklad kdy většina plochy zůstává stejná, a mění se jen nějaký vodoznak, polep či popisek na stále stejném podkladu.

Popis řešení první varianty – celoplošná výměna

Ve stránce vytvořme obalový div s vlastností id="obal", do kterého umístíme seznam výrobků (element ul). V každé položce seznamu (element li), je odkaz reagující na přejetí kurzoru. Každý z odkazů má svůj jednoznačný popisek (vlastnost id), která slouží k jeho identifikaci a práci s CSS. Navíc je v každém z odkazů umístěn ještě element span, který zajišťuje potřebnou funkcionalitu (na jeho pozadí jsou „promítány“ obrázky).

Kód stránky vypadá takto:

CSS zde má úkoly dva – vykreslit výchozí stav a také stav, kdy je kursor nad některým z odkazů. Zobrazení výchozího stavu zajistí tato část CSS:

#obal { position: relative; }
#obal ul { list-style: none; padding: 0; margin: 0; }
#obal ul li { display: inline; }
#obal ul li a { position: static; }
#obal ul li a span { display: none; }

Prvku s id="obal" nastavíme position: relative, tedy vlastnost, díky které budou všechny do tohoto prvku vnořené objekty přebírat souřadnice z jeho levého horního rohu. Pro menu (ul) vložené v prvku s id="obal" nastavíme, že nemá zobrazovat zarážky, a rovněž mu zrušíme vnitřní a vnější odsazení. Pokud chceme položky v seznamu (li) mít jako textový seznam, nastavíme display: inline. Jako poslední zneviditelníme ve výchozím stavu všechno, co je v prvku span (také background, tedy obrázek o který nám jde).

Následuje CSS pro hover efekty – co má CSS provést, když je kurzor nad odkazy (kvůli čitelnosti byl zvolen víceřádkový zápis):

#obal ul li a:hover span {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #888;
  background-image: url(‚reseni1.jpg‘);
  background-repeat: no-repeat;
}

Zápis #obal ul li a:hover span znamená, že se CSS popisy mají provést pouze na prvcích span, které jsou dětmi nějakého odkazu, nad kterým je právě kurzor. Tyto odkazy musí být umístěny v položce (li) neuspořádaného seznamu (ul), který je umístěn v prvku s id="obal". Pokud je tato podmínka splněna, CSS tento span zobrazí jako blokový element (display: block přebije display: none), absolutně ho umístí na předem danou pozici v daných rozměrech a jako pozadí nastaví obrázek reseni1.jpg.

Tento kód by zobrazoval pro všechny zobrazovací plochy stejný obrázek, naštěstí máme všechny odkazy označeny atributem id, takže můžeme v CSS nastavit konkrétní chování pro každou položku:

#obal ul li a:hover#ob1 span { background-position: 0 0; }
#obal ul li a:hover#ob2 span { background-position: 0 -200px; }
#obal ul li a:hover#ob3 span { background-position: 0 -400px; }

Tímto pro každou položku nastavujeme jinou část pozadí z velkého obrázku ukazka1.jpg.

Popis řešení druhé varianty – s výměnou průhledného obrázku

Výše uvedené řešení by se jistě dalo napsat i elegantněji, v článku však bylo použito proto, aby se dalo jednodušeji navázat na druhé řešení, které bude navíc zobrazovat podkladový obrázek, na který se bude vykreslovat rozdílový rastr.

Další výhodou druhého řešení je, že obrázek bude načten do prohlížeče již před tím, než uživatel použije přejíždění kurzoru k vyvolání změny obrázku (protože podkladový obrázek a obrázky rozdílové jsou stále jeden a týž soubor), jak se můžete přesvědčit. Tato výhoda se však nemusí hodit vždy, proto si v závěru řekneme, jak se jí v případě potřeby vyhnout.

Oproti předchozímu příkladu přidáme do stránky jeden prvek div (<div id="start">) do obalového divu. (Tato konstrukce není nutná – funkcionalitu zobrazování podkladu mohl převzít i obalový prvek sám o sobě, v článku je ale použita kvůli rámečku okolo obrázku.) Tento prvek by měl být před seznamem ul, protože chceme zajistit jeho vykreslení pod objevující se prvky seznamu.

Změny v CSS:

#obal #start {
  display: block;
  position: absolute;
  top: 30px;
  left: 0;
  width: 200px;
  height: 200px;
  border: 1px solid #888;
  background-image: url(‚reseni2.gif‘);
  background-repeat: no-repeat;
  background-position: 0 0;
}

Přibyl popisek přidaného elementu s id="start", dále se změnilo pozadí zobrazovaných prvků z bílé (#FFF) na průhlednou (transparent) a rovněž byly adekvátně změněny popisky pozice obrázků – tak, aby odpovídaly novému obrázku – první pozice je určena pro podklad, další pro vyměňující se části obrázku.

Další možnosti

Pokud máte na stránce podobných zobrazovacích ploch více, jistě nechcete nutit návštěvníka k tomu, aby stahoval všechny poměrně objemné obrázky najednou – včetně těch, které si nehodlá prohlížet.

Nahrávání celých obrázků už při otevření stránky zabráníte poměrně jednoduše – místo jednoho obrázku pro každou zobrazovací plochu použijete obrázky dva, jeden na pozadí a jeden pro rozdílné plochy. Tím dojde k tomu, že dokud uživatel nepoužije kurzor myši k vyvolání „hover efektu“, obrázek s rozdílovými plochami se nenahraje.

Uvedené příklady se jistě dají zjednodušit, či ještě lépe využít, například místo prázdného znaku se může použít textový popisek a díky CSS jej můžete upravit do hezké podoby. Rovněž odkazy sloužící k přepínání by měly sloužit k zobrazení zvětšeniny konkrétního výrobku.