Nyitó

Gyorstalpaló

Tervezés

HTML

CSS

Sablonok

Bevezetés

Szintaktika

Dokumentum szerkezet

Általános attribútumok

Szöveg megadása

Linkek

Kép beillesztése

Táblázatok

Listák

Űrlapok

Szkriptek

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.

Hattyúk

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.



Tőzsde és technikai elemzés érthetően