Kép megjelenítése felugró ablakban

Gyakran előforduló feladat az, hogy egy alapvetően szöveges oldalon szeretnénk nagyméretű képet bemutatni. Az jelenti a problémát, hogy a nagy kép elfoglalja a képernyőfelületet és ezzel megtöri a szöveg egységét.

Nagyításhoz kattints a képre!

Ilyenkor általában a legjobb a szöveg mellé beilleszteni a képet kicsinyített formában, amire rákattintva megnyílik a nagy kép. Ha ezt egyszerű hivatkozással tesszük meg, akkor a kép a böngészőablakban fog megjelenni – a szöveges oldal helyett. (Erre a linkre kattintva egyszerű hivatkozásként nyílik meg a nagyméretű kép.)

Én általában jobb megoldásnak tartom, ha a kép egy felugró ablakban jelenik meg a szöveges oldal fölött. Ha a weblapod olvasója megnézte a képet, akkor bezárhatja a felugró ablakot. Ha pedig váltakozva akarja nézni a képet és olvasni a szöveget (például egy grafikon elemzése közben), akkor azt a szokásos Alt+Tab billentyűkombinációval teheti meg.

A fent látható kép az alábbi HTML és JavaScript kóddal lett beillesztve erre az oldalra:

<div style="float: right;
    margin: 0px; padding: 5px;
    border-style: none;
    width: 258px">

<a href="hattyuk_nagy.jpg"
    onclick="window.open('hattyuk_nagy.jpg', '',
    'width=825, height=625, left=20, top=25, screenX=20, screenY=25, directories=no, menubar=no, toolbar=no');
    return false;">

<img src="hattyuk_kicsi.jpg"
    width="248" height="186" alt="Hattyúk"
    style="margin: 0px">

</a>

<p style="font-size: 10pt;
    color: #555555;
    text-align: center;
    margin-top: 3px">
    Nagyításhoz kattints a képre!</p>

</div>

A <div> tagra azért van szükség, hogy a kép és a „kattints a képre” felirat együtt mozogjon. Az egész jobbra van úsztatva, ezért meg kellett adni a szélességet: 248 pixel a kép és 2 x 5 pixel a <div> tag helykitöltése (padding), tehát a szélesség 258 pixel.

A link href attribútuma adja meg a nagy méretű kép elérési útvonalát akkor, ha a böngészőben ki van kapcsolva a JavaScript. (Ebben az esetben természetesen nem lesz felugró ablak.)

A link onclick attribútuma adja meg azt a JavaScript kódot, ami a képre kattintás után megnyitja a felugró ablakot, benne a nagyméretű képpel. Ez a kód két utasításból áll:

• window.open függvény megnyitja a felugró ablakot. Három paramétere van (idézőjelek között, egymástól vesszővel elválasztva):
• a megnyitandó fájl elérési útvonala
• a megnyíló ablak neve (csak akkor van értelme nevet adni, ha később JavaScript-ből még el akarjuk érni az ablakot)
• az ablak tulajdonságai, ezek a fenti példában a következőek:
• width=825: az ablak szélessége
• height=625: az ablak magassága
• left=20, screenX=20: a megnyíló ablak bal felső sarka vízszintes irányban a képernyő bal felső sarkától, pixelben megadva. (A két paraméter ugyan azt jelenti. A 90-es évek böngésző háborúja következtében a böngészők nem teljesen ugyan azt a JavaScriptet „beszélik”. A böngészők egy része vagy csak az egyik vagy csak a másik paramétert érti meg.)
• top=25, screenY=25: a megnyíló ablak bal felső sarka függőleges irányban a képernyő bal felső sarkától, pixelben megadva.
• directories=no: a személyes eszköztár kikapcsolva
• menubar=no: a menüsor kikapcsolva
• toolbar=no: eszköztár kikapcsolva
  (Az ablak tulajdonságértékeit a programkódban egy sorba kell írnod, különben nem fog működni a window.open függvény.)
• A return false utasítás akadályozza meg, hogy a felugró ablak után, a linket követve, a böngésző ablakban is megnyíljon a nagyméretű kép.

Tipp: A fenti megoldást csak akkor érdemes alkalmazni, ha a weblapod olvasói nagy valószínűséggel számítógép képernyőn olvassák a weblapodat. Ha a felugró ablak lelóg a képernyőről, akkor az olvasóid nehezen tudják azt lezárni. Akkor pedig a felugró ablak nem fogja segíteni őket, inkább csak bosszankodnak majd miatta. Ha a weblapodat sokan fogják mobil eszközön olvasni, amelynek kicsi a kijelzője, akkor egyébként is a legjobb, ha nem illesztesz be nagyméretű képeket az oldalaidra.