Více náhledů videa

Jeden obrázek pro dostatečnou představu o obsahu vide nemusí stačit. Proto se nabízí při najetí myší na obrázek automaticky zobrazit náhledy z jiné části videa.

Pro optimalisaci počtu HTTP spojení a pro zajištění, že další obrázky budou včas načtené, může být vhodné umístit všechny náhledy z různých částí videa do jednoho obrázku (tzv. CSS spritu). V následujících ukázkách náhledů ze serveru YouTube ale budou použity jednotlivé obrázky, protože je tak YT přímo nabízí, nicméně zásadní rozdíl mezi řešením CSS spritem a jednotlivými obrázky není.

Automatická smyčka náhledů

První možnost je při najetí myší (v CSS :hover, v JavaScriptu onmouseover) s prodlevou obrázky prohazovat. To může řešit buď JS časovač, nebo od IE 10 animace v CSS. V ukázce se používá JS časovač.

Ruční procházení náhledů

Předchozí řešení není úplně špatné, ale možná by bylo lepší, kdyby si šlo nějak zvolit, který obrázek si chci prohlédnout.

Nabízí se proto umístit do náhledu pro každý jeden obrázek nějakou plochu, která po najetí zobrazí vybraný náhled.

Řešení je čistě v CSS (samostatná ukázka).

1. V obalovém <div>u jsou vedle sebe absolutně naposicovány plochy reagující na :hover.
2. Kromě prvního obrázku jsou nejprve všechny ostatní skryté.
3. Při :hoveru na ploše se pomocí selektoru příméhou sourozence zobrazí odpovídající obrázek, který v kódu následuje plochu.

Prázdný element v IE

V Explorerech je normálně ignorován element bez obsahu, pokud nemá pozadí. Řešení je nějaké nastavit a neviditelnou aktivní oblast vytvořit stoprocentním zprůhledněním (opacity: 0; filter: alpha(opacity=0);) nebo nastavením nějakého obrázku na pozadí — obrázek to může být libovolný:

• jednopixelový průhledný,
• obrázek, co se na stránce již používá (aby se nevytvářel další HTTP požadavek), naposicovaný (background-position) někam minus 1000 pixelů mimo (aby nebyl vidět)
• nebo klidně obrázek neexistující (to je použito v ukázce).