Beágyazott elemek

A korábbi leckékben már sok taget megismertünk, de egyelőre mindenhol a szöveg dominált. Most viszont elérkeztünk oda, hogy a képek, videók stb. beágyazásáról is beszéljünk.

Kezdjük mindjárt a képek beszúrási lehetőségével!

<img> – Kép beszúrása

Mire használjuk?

A képek oldalunkra történő beágyazására használhatjuk.

A tag paraméterei:

• globális attribútumok
• src: itt adhatjuk meg a kép forrását (kötelező!)
• alt: az alternatív, helyettesítő szöveg megadására szolgál (kötelező!). Ebben a paraméterben kell megadnunk azt szövegesen, hogy mi látható a képen. Minden esetben töltsük ki megfelelő értékkel, hiszen ezzel is segítünk azoknak, akik kikapcsolják a képek megjelenítését a böngészőprogramban, vagy eleve nem grafikus böngészőprogramot használnak, hanem például szövegfelolvasó programot. A vak felhasználók számára (is) alapvetően fontos, hogy a képek esetén legyen egy rövid szöveges leírás is.

• longdesc: a kép hosszú leírását tartalmazó fájl url-je kerül ide. Amikor az alt paraméterben már nem tudjuk teljes értékűen leírni a kép tartalmát (pl. bonyolult ábra, diagram), akkor megtehetjük, hogy a leírást egy külön HTML-állományban helyezzük el, és az ezen oldalra mutató linket tesszük a longdesc paraméterbe.
• width: a kép az itt megadott szélességgel jelenik meg.
• height: a kép az itt megadott magassággal jelenik meg. Ha a width és a height attribútum közül csak az egyiknek adunk értéket, a böngészőprogram a másik paraméter értékét automatikusan, a kép eredeti oldalarányainak megfelelően megváltoztatja. Ha mindkét paraméter értékét kitöltjük, a képet úgy is átméretezhetjük, hogy az eredeti oldalarányok nem maradnak meg, vagyis a kép eltorzulhat.
• usemap: Az <img> tag usemap attribútuma egy kliensoldali térképet kapcsol hozzá a képhez, amellyel gyakorlatilag a kép egyes részeit kattinthatóvá tehetjük. A paraméter használatát később példákon keresztül bemutatjuk.
• ismap: Ha megadjuk az <ismap> attribútumot, az azt jelenti, hogy a kép része egy szerveroldali térképnek (vagyis egy képnek, amelyen kattintható területek vannak meghatározva). Amikor egy ilyen képre kattintunk, a koordinátákat a böngésző elküldi a szervernek. Csak akkor engedélyezett a használata, ha az <img> tag egy <a> tag leszármazottja. Ebben a tananyagban ezzel a paraméterrel nem foglalkozunk részletesen.

A következőkben nézzünk olyan példákat, amelyek bemutatják az egyes paraméterek jelentését!

Kép beillesztése ALT szöveg kitöltésével

Példa

Forráskód

<img src="kepek/matyastemplom_teto.jpg" alt="A Mátyás-templom tetőcserepei">

Magyarázat

A fenti példa egy kép beszúrására mutat példát. A kép alternatív szövegének a „A Mátyás-templom tetőcserepei” szöveg van beállítva. Figyeljük meg, hogy ez a szöveg nem látható a vizuális böngészőprogramban, és ha a kép fölé visszük az egeret, akkor sem jelenik meg.

A példa meghallgatása képernyőolvasó programmal

A vak felhasználók által használt képernyőolvasó program viszont felolvassa a szöveget, a következő módon:

• Cím: A példa eredménye a JAWS alkalmazásban
• Hossz:2 mp.
• Fájlméret: 0.06 MB
• A példa eredménye a JAWS alkalmazásban című hanganyag letöltése

A fenti kép esetén a látók számára sem biztos, hogy egyértelmű, hogy mi látható a képen, ezért érdemes a kép címét/magyarázatát más módon is elhelyezni. Megtehetjük, hogy a title globális attribútumot használjuk, és ugyanazt, vagy egy másik, szöveget írjuk be, mint amit az alt paraméterben is megadtunk. Ekkor a szöveg megjelenik, ha a kép fölé visszük az egeret.

De a korábban bemutatott <figure> és <figcaption> tag-ek alkalmazásával is megadhatjuk a képaláírást. A következő példa mind a kettő lehetőséget tartalmazza.

Kép beillesztése az alt, title paraméter és <figcaption> tag használatával

Példa

Forráskód

<figure>
  <img src="kepek/matyastemplom_teto.jpg" 
      alt="A Mátyás-templom tetőcserepei" 
      title="A Mátyás-templom tetőcserepei">
  <figcaption>A Mátyás-templom tetőcserepei</figcaption>
</figure>

Az előző példát alakítsuk úgy tovább, hogy a vak felhasználók számára további információkat adjunk a képről!

A Longdesc paraméter használata

Példa

Forráskód

<figure>
  <img src="kepek/matyastemplom_teto.jpg" 
        alt="A Mátyás-templom tetőcserepei" 
        title="A Mátyás-templom tetőcserepei"
        longdesc="kepek/matyastemplom_leiras.html">
  <figcaption>A Mátyás-templom tetőcserepei</figcaption>
</figure>

A matyastemplom_leiras.html tartalma pedig lehet például a következő:

Forráskód

<!DOCTYPE html>
<html lang="hu">
 <head>
    <title>A Mátyás-templom tetőcserepei című kép leírása</title>
    <meta charset="utf-8">
</head>
<body>
  <p>A képen a Mátyás-templom színes tetőcserepei láthatóak, 
amelyek a Zsolnay-porcelánmanufaktúrában készültek. 
A színes, hatszög alakú cserepek úgy vannak elhelyezve, 
hogy különböző mintázatokat alkossanak.</p>
 </body>
</html>

Érdemes meghallgatnunk, hogy a JAWS képernyőolvasó hogyan fogja az előző példát felolvasni.

A következőkben nézzünk példát a width és height paraméterek használatára, amelyekkel a kép fizikai méretétől eltérő méretben (is) beilleszthetjük a képet.

Kép átméretezése a width és height használatával

Példa

Forráskód

<figure>
  <img src="kepek/matyastemplom_teto.jpg" 
        alt="A Mátyás-templom tetőcserepei" 
        width="200"
        height="150">
  <figcaption>A Mátyás-templom tetőcserepei</figcaption>
</figure>

Magyarázat

Az eredeti kép 400 képpont széles és 300 képpont magas volt. A fenti példában pontosan felére csökkentettük a méretét a width és height paraméter segítségével.

Fontos

Ha a kicsinyítés során nem tartjuk meg az eredeti oldalarányokat, a kép minősége jelentősen csökkenhet, torzulhat.

Kapcsolódó ergonómiai elvek

A kép méretét akkor is érdemes megadnunk a width és height paraméterrel, ha a kép méretén nem akarunk változtatni, mert ezen információ birtokában a böngészőprogramok gyorsabban jeleníthetik meg az oldalt. Ha mondjuk egy oldalon a képek a szövegben lebegtetve (balra, vagy jobbra igazítva) vannak, és a képek letöltése lassú, akkor előfordulhat, hogy az oldal a letöltés során többször átrendeződik, ami nagyon zavaró tud lenni, ha már a látogató elkezdte olvasni az oldalt. A méret megadásával viszont a böngésző tudja, hogy mekkora helyet kell kihagynia a még le nem töltődött képek számára.

Előkép használata normál és lényegkiemelő kicsinyítéssel

Példa

Forráskód

<figure>
  <a href="kepek/lepke_nagy.jpg" title="A Lepke című kép megtekintése nagyobb változatban">
  <img src="kepek/lepke_kicsi_v2.jpg" 
        alt="Lepke" 
        width="200"
        height="150">
  </a>
  <figcaption>Lepke (előkép lényegkiemelő kicsinyítéssel)</figcaption>
</figure>

Magyarázat

A lényegkiemelő kicsinyítés eredményeként sokkal jobban látható a kép fő témája.

Vissza a tartalomjegyzékhez