Autoresize z IE6 ve všech prohlížečích

3. dubna 2003

•

Jako jedno z řady vylepšení přináší prohlížeč Internet Explorer verze 6 funkci automatické změny velikosti obrázku (image autoresize) tak, aby se tento právě vešel do okna prohlížeče. Určitým trikem pomocí JavaScriptu docílíme téhož efektu, který bude navíc funkční ve většině nových prohlížečů.

Popis funkce image autoresize naleznete na stránkách Microsoftu, ukázku u nás. Její zdrojové soubory si také můžete stáhnout.

Základem naší aplikace je zjištění velikosti okna klienta a poměru stran. Poté si určíme, zda je obrázek spíše širší nebo vyšší – jednoduše stanovíme poměr výšky a šířky. Pokud je poměr obrázku větší než poměr stran okna, znamená to, že obrázek můžeme maximálně natáhnout na celou šířku okna a do zbytku se nám vejde obrázek na šířku. Pokud je poměr opačný, můžeme obrázek roztáhnout na celou výšku okna tak, aby se vešel celý a zůstal zachován poměr stran. Pokud skriptem změníme pouze jeden z rozměrů, prohlížeč sám dopočítá druhý rozměr tak, že poměr stran obrázku zůstane zachován, aniž by se obrázek deformoval.

Aby bylo možné s obrázkem, ale i oknem prohlížeče různě „cvičit“, potřebujeme si na začátku skriptu uložit původní šířku a výšku obrázku. To je možné až po načtení obrázku, proto tuto operaci zahájíme až událostí onload vyvolanou načítaným obrázkem. Aby se obrázek přizpůsoboval oknu i při změně velikosti okna, zařadíme obsluhu události onresize v okně.

Pro komfortnější použití přidáme tlačítka, kterými je možné přepínat mezi originální velikostí a naší funkcí auto resize. Obsluha události tlačítka, které vrátí obrázek do originálního zobrazení, prakticky jen vrátí původní uložené rozměry a odebere obsluhu onresize, aby obrázek nereagoval na změny okna. Opětné zapnutí se provede zavoláním funkce, která přepočítá nové rozměry obrázku podle okna a nastaví novou obsluhu onresize.

Jako určitý doplněk je přidáno nastavení titulku okna, kam se vkládá jméno zobrazovaného obrázku a aktuální velikost. Tuto funkci můžeme v závislosti na použití aplikace zakomentovat, je zde jako určitá demonstrace chování, které známe z prohlížečů obrázků (IrFanView, ACDSee) při volbě režimu obvykle zvaného „Fit to Window“.

Na první pohled se může zdát, že je aplikace „rozsekána“ na příliš mnoho krátkých funkcí. Jedním z důvodů je, že pokud chceme dynamicky nastavovat obsluhu události ve skriptu, není možné předávat parametry, syntaxe dovoluje pouze zadat název funkce. Další důvod je, že některé části chceme provést pouze při načtení stránky, jiné se provádějí vždy při změně velikosti okna a jiné při ovládání naší aplikace tlačítky.

Zde je komentovaný popis skriptu, který princip a funkci lépe objasní:

<div>
<img id=“MyImage“ src=“image.gif“ style=“margin:0px;padding:0px;border:0px“ />
<br style=“clear:both“ />
<script type=“text/javascript“>
<!–
var OrigW; // zde bude původní šířka (width)
var OrigH; // zde bude původní výška (height)
var ImgObj=document.getElementById(‚MyImage‘); // získání přístupu k objektu našeho obrázku
function FitImage(MyObj,ViewWidth,ViewHeight)
{ // funkce přepočítá nové rozměry dle prostoru v okně klienta
var ImgScale = OrigW/OrigH; // poměr stran původního obrázku
var ViewScale = ViewWidth/ViewHeight; // poměr stran okna klienta
MyObj.removeAttribute(‚width‘); // preventivně odebrat atribut width
MyObj.removeAttribute(‚height‘); // preventivně odebrat atribut height
if (ImgScale>ViewScale)
{ // je možné natáhnout na šířku
MyObj.width=ViewWidth; // nastavit šířku obrázku na dostupnou šířku okna
}
else
{ // je možné natáhnout na výšku
MyObj.height=ViewHeight; // nastavit výšku obrázku na dostupnou výšku okna
}
document.title= ImgObj.src + ‚ (‚ + ImgObj.width + ‚x‘ + ImgObj.height + ‚)‘; // do titulku nastavit zdroj obrázku a aktuální rozměry
}
function SetFit()
{ // funkce, která zajistí volání funkce FitImage s parametry
FitImage(ImgObj,document.body.clientWidth-10,document.body.clientHeight-10); // dostupný rozměr okna klienta bez okraje body
}
function InitFit()
{ // funkce pro uložení původního rozměru obrázku, inicializaci a zavedení obsluhy onresize
OrigW=ImgObj.width; // uložit původní šířku
OrigH=ImgObj.height; // uložit původní výšku
SetFit(); // přepočítat a nastavit nové rozměry obrázku
window.onresize=SetFit; // nastavit volání SetFit při každé změně velikosti okna
}
function SetOrig()
{ // funkce pro zrušení autoresize
window.onresize=null; // zrušit reakci na změnu okna
ImgObj.width=OrigW; // vrátit původní šířku
ImgObj.height=OrigH; // vrátit původní výšku
document.title= ImgObj.src + ‚ (‚ + ImgObj.width + ‚x‘ + ImgObj.height + ‚)‘; // vložit nové hodnoty do titulku
}
window.ImgObj.onload=InitFit; // jakmile je obrázek načten, spustit InitFit
// –>
</script>
<input type=“button“ value=“Původní“ onclick=“javascript: SetOrig()“ />
<input type=“button“ value=“Auto Resize“ onclick=“javascript: InitFit()“ />
</div>

V ukázce vidíme obrázek pojmenovaný atributem id. Všimněte si, že nemá uvedeny rozměry ani pomocí atributů width a height, ani pomocí stylu, což je životně důležité pro správnou funkci aplikace. Pod okomentovaným skriptem jsou dvě tlačítka, na událost onclick volají funkce z našeho skriptu, takže jejich funkce by měla být z komentářů ve skriptu také jasná.

Zvlášť bych jen zmínil použití metody removeAttribute. Pokud se ve skriptu nastaví například šířka a poté dojde ke změně okna tak, že je potřeba nastavovat výšku, šířka nám zůstane již nastavená po předchozí operaci a aplikace by nepracovala správně. Použitím této metody prohlížeč zapomene, že jsme kdy něco takového nastavovali a naloží se šířkou dle svého (dopočítá ji v poměru k výšce).

Za pozornost stojí i zadání parametrů pro volání funkce FitImage. Zde se předává výška a šířka okna klienta (clientWidth, clientHeight) snížená o okraj okna, jinak by se obrázek do okna nevešel a zobrazily by se rolovací lišty. Případně je možné nastavit nulový okraj okna a neodečítat nic.

Aplikaci by bylo možné upravit tak, aby tlačítko bylo pouze jedno a měnila se jeho funkce v závislosti na nastaveném režimu. Kdo nechce aktivovat funkci autoresize ihned po načtení stránky, může zakomentovat poslední řádek skriptu. Funkčnost jsem testoval v prohlížečích IE6, Mozilla 1.3 a Opera 7.03, v nichž skript pracuje až překvapivě dobře.