Képek beillesztése: IMG

Képek beillesztésére a legegyszerűbb módszer az IMG elem használata. A kép címét az src paraméter értékeként kell megadni. A böngészők legalább a GIF, JPEG és PNG formátumot ismerni szokták, így ezekben a formátumokban célszerű a képeket elhelyezni a weben.

A Mozilla ezenfelül még a BMP formátumú képeket is gond nélkül megjeleníti, azonban mivel ez tömörítetlen formátum, ezért interneten ilyen formátumban a képeket nem illik tárolni a nagy méretük miatt.

A GIF formátum lehetővé teszi mozgóképek készítését és tárolását is, így az animált képek beillesztésére a dokumentumba, ez egy lehetőséget biztosít.

A következő példa megmutatja az elem használatát. Egy fényképet illesztünk be a dokumentumba, amely fénykép a family.png nevű állományban található:

Az alt paraméter értéke akkor jelenik meg, ha a böngésző a képet valamilyen okból nem tudja megjeleníteni. Ez az ok lehet akár az is, hogy még nem töltötte le, vagy nem is találja a képet, esetleg a kép formátumát nem tudja értelmezni. Az első esetben ha a képet letölti, akkor a szöveg eltűnik, és a kép megjelenik.

A kép megjelenítésénél a kép méretét többféleképpen lehet meghatározni. Az egyik lehetőség, ha a böngészőre hagyjuk, hogy a kép letöltése után meghatározza a méreteket. Ez az oldal átrendezését eredményezheti, azonban ha a képet eredeti méretében kívánjuk megjeleníttetni, akkor ezt kell alkalmaznunk. A fenti példa is ilyennek tekinthető.

A második lehetőség, ha az elem width és height paraméterével megadunk egy konkrét méretet. Ekkor akármekkora is a kép, a megadott méretben fog megjelenni úgy, hogy a böngésző a képet a szükséges mértékben torzítja ha szükséges. Ettől a kép betöltése még nem lesz gyorsabb, hiszen továbbra is az egész képet kell letölteni, még ha lekicsinyítve jelenik is majd meg. Ugyanez elérhető a stíluslapon az elemhez készített szabállyal is, ahol a width és a height tulajdonságokat kell használni.

Az erőforrással való takarékoskodás céljából fogadjuk meg a következő szabályokat:

• A dokumentumunk nyitóoldalán ne helyezzünk el nagy méretű képeket, mert lassú hálózat esetén rettenetesen hosszúvá válhat az oldal betöltése!
• A nagyméretű képek fölösleges letöltésének elhagyásával az olvasó idejét megspórolhatjuk. Ezért ajánlatosabb egy kicsinyített változatot használni hivatkozásként a nagy képre. Így az olvasó eldöntheti a kis képről, hogy be akarja-e tölteni a képet. A kicsinyített kép a fentiek alapján tényleg egy külön, lekicsinyítve elmentett változata legyen a nagy képnek!

Ha a kép hivatkozáson belül található, akkor a képet a legtöbb böngésző egy kerettel veszi körül, amelynek színe megegyezik a hivatkozás szövegénél használt színnel. Ennek eltüntetésére az IMG elem keretét állítsuk nulla méretűre, például így:

A kép formázására alkalmas tulajdonságok

A kép egy dobozba kerül, így a doboz méreteit a width és a height tulajdonságokkal be lehet állítani. Ezzel előírható, hogy a böngésző a kép valódi méretei helyett milyen méretekben jelenítse meg azt.

A doboz körül a margó és a belső margó állításával tudunk üres tért létrehozni a szomszédos objektumoktól történő elválasztás céljára. A margó és a belső margó között elhelyezkedő keret szintén beállítható. Ez utóbbinál vigyázzunk a hivatkozáson belüli képekre, valamint azokra a képekre, amelyekhez térkép is tartozik, mivel ezeknél alapértelmezésben van keret, melynek színe a hivatkozás szövegének színével egyezik meg!

A képek, objektumok igazításáról majd az úsztatott objektumoknál ejtünk szót.