<info9>

Képek

A weboldalak tartalmainak fontos részét képezik a képek, amelyek elhelyezésére több lehetőség is adódik. Már maga az alap HTML is sok lehetőséget kínál számunkra a képek beillesztésére, de kezdjük először az alapokkal.

Az IMG elem

Képek beszúrására a legegyszerűbb lehetőség az IMG elem használata. Ez az elem üres, tartalom nélküli elem, tehát nem szükséges külön lezárnunk. Az elemben megjelenítendő képet, és annak fontosabb információit paraméterek formájában adhatjuk meg. Az IMG elem fontosabb paraméterei:

• src: a képfájl elérési útja, amit meg szeretnénk jeleníteni
• alt: a kép tartalmát röviden leíró, alternatív szöveg (ez jelenik meg, ha nem sikerül a képet betölteni, továbbá a képernyőolvasó szoftvert használók is ezt halhatják)
• title: a képre egérrel történő rámutatáskor megjelenő szöveg (buboréksúgó)
• width, height: a kép mérete (bár ezt manapság érdemesebb a CSS-ben meghatározni)
• usemap: amennyiben a képhez tartozik térkép, úgy annak az azonosítója (lásd lentebb)
• ismap: logikai érték, értéket nem szükséges megadni neki - megmutatja, hogy a kép egy szerveroldali térkép eleme-e (lásd lentebb)
• az IMG tagnek további paraméterei is lehetnek, de azokról ebben a cikkben nem írunk

Ha tehát egy egyszerű képet szeretnénk megjeleníteni, akkor ezt könnyedén megtehetjük így:

<img src="https://dummyimage.com/200x200" />

Azonban érdemes minden esetben megadnunk ezen felül legalább az alt attribútumot, így a kódunk ezzel kiegészítve így néz ki:

<img src="https://dummyimage.com/200x200" alt="Helykitöltő ábra" />

Tipp! Ha az oldaladba beágyazott kép az oldalad HTML fájljával azonos mappában található, elég a kép fájlnevét megadnod. Ha egy közeli mappában található, akkor nyugodtan használhatsz relatív hivatkozást is a kép helyének megadásához. De természetesen a teljes URL-t is megadhatod, ha például más oldalról töltesz be egy képet.

Képek leírással

Mint korábban már írtuk, a webfejlesztés során fontos szempont a szemantikusság megőrzése, így ha a képünket leírással szeretnénk ellátni, érdemes a szabvány által erre kínált figure és figcaption elem megfelelő használata.

<figure>
  <img src="minta.jpg" alt="Minta kép" >
  <figcaption>Képaláírás</figcaption>
</figure>

Térképek

Előfordul, hogy azt szeretnénk, hogy egy kép különféle részeire kattintva más-más dolgok történjenek. Bár manapság ezt gyakran JavaScript-ből oldjuk meg, érdekesség, hogy a HTML-nek is van erre egy saját megoldása - sőt, igazából kettő! Kezdjük a tisztán HTML-es megoldással.

A beszúrt képeinkhez létrehozhatunk egy-egy ún. térképet, a MAP elem segítségével. Ezt az elemet bárhol elhelyezhetjük az oldalon, ugyanis önmagában nem jelenít meg semmit a böngészőben, mindössze többletinformációkat tartalmaz, amit később majd a képünkhöz csatolhatunk. A MAP elemben AREA elemeket helyezhetünk el, ezekkel definiálhatjuk a képen található egyes területeket, valamint adhatjuk meg azok funkcióját.

Nézzünk egy mintát egy MAP elemre, majd tekintsük át az AREA lehetséges paramétereit:

<map name="asztal">
  <area shape="rect" coords="10,10,250,250" alt="Számítógép" href="szg.html">
  <area shape="circle" coords="300,150,50" alt="Kávé" href="kave.html">
</map>

Itt tehát létrehoztunk egy térképet, benne két darab területtel. A területek fontosabb tulajdonságai:

• shape: a terület alakja, 4 lehetséges értéke lehet:
  • rect: téglalap
  • circle: kör
  • poly: sokszög
  • default: az egész kép, pontosabban a kép minden olyan része, ahol semmi más terület nincs
• coords: a terület koordinátái - a használata az alakzat típusától függ
  • rect: téglalap esetén 4 db koordinátát kell megadni, amik a téglalap 2 sarkának az X és Y koordinátái lesznek
  • circle: a kör középpontjának az X és Y koordinátáját, majd a kör sugarát kell megadni
  • poly: tetszőleges számú X és Y koordinátát kell felsorolni egymás után, ezek határozzák meg a sokszög pontjait
• alt: a terület alternatív, szöveges neve
• href: az URL, amit szeretnénk, ha a kép adott részére kattintva megnyílna, mint egy a elemnél (természetesen ha nem szeretnénk kattintásra elnavigálni a felhasználót, akkor elhagyható, vagy akár JS eseményeket is tehetünk az AREA elemekre)

Most, hogy elkészült a térképünk, nincs más dolgunk, mint egy IMG elemre alkalmazni. Ehhez a MAP elemhez hozzáadott NAME paramétert fogjuk használni, ezzel tudjuk megjelölni, hogy egy adott képhez melyik térkép tartozzon:

<img src="https://dummyimage.com/500x380" usemap="#asztal" />

Az usemap paraméterben a # utáni asztal szó az előbb létrehozott térkép azonosítója, ezzel kapcsoljuk hozzá a térképet a képhez. Egy oldalon több képhez is tartozhat ugyanaz a térkép.

Szerveroldali térképek

Előfordulhat olyan is, hogy a térkép funkcionalitást szerveroldalon szeretnénk megoldani. A szerveroldali adatfeldolgozásról a HTML tananyagban nem írunk, azonban hamarosan elérhetőek lesznek tananyagaink a szerveroldali programozáshoz is! Ez esetben nincs más dolgunk, mint a kiszemelt IMG taget elhelyezni egy A elemben, majd az IMG-re elhelyezni az ismap paramétert:

<a href="minta.php">
  <img src="https://dummyimage.com/500x380" ismap />
</a>

Az ismap paraméter használatával arra utasítjuk a böngészőt, hogy a képre kattintva fűzze hozzá az URL-hez annak a pontnak a koordinátáját, ahová a felhasználó kattintott. Ez tehát azt jelenti, hogy ha a kép bal felső sarkától 100 képponttal jobbrább, és 50-nel lentebb kattintunk, akkor a böngésző nem a minta.php, hanem a minta.php?100,50 URL-re fog munket navigálni. A paramétert feldolgozva pedig, szerveroldalon megvalósíthatjuk a funkciót, amit szerettünk volna.

A PICTURE elem

Hamarosan!