Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

IMG-elementti XHTML 1.0 Strict -dokumenttityypissä

IMG-elementillä (inline image) merkitään dokumenttiin upotettavat kuvat.

Merkkaus: <img src="..." alt="..." />
Sallittu sijainti: a | abbr | acronym | address | b | bdo | big | button | caption | cite | code | dd | del | dfn | div | dt | em | fieldset | h1 | h2 | h3 | h4 | h5 | h6 | i | ins | kbd | label | legend | li | object | p | q | samp | small | span | strong | sub | sup | td | th | tt | var
Sallittu sisältö: sisällötön
Attribuutit: alt | height | ismap | longdesc | src | usemap | width | yleiset attribuutit

Huomiot

Upotetun kuvatiedoston tyyppi voi olla periaatteessa mikä tahansa, mutta yhteensopivuus maksimoidaan käyttämällä kahta kuvamuotoa: JPG- ja GIF-formaatteja. Myös PNG on nykyisin hyvin tuettu kuvamuoto.

IMG-elementin attribuutit

Esitettävään kuvatiedostoon viitataan pakollisella SRC-attribuutilla (source, lähde), jonka arvoksi annetaan kuvan URI.

Elementin toinen pakollinen attribuutti on ALT (alternate text), jolla määritellään kuvalle vaihtoehtoinen teksti, joka astuu voimaan tilanteissa, joissa asiakasohjelma ei tue kuvia ja mahdollisesti myös silloin kun selaimen käyttäjä on poistanut päältä kuvien latautumisen. Lisätietoja ja suosituksia ALT-attribuutin käytöstä ja siihen liittyvästä ongelmallisuudesta Jukka Korpelan Guidelines on alt texts in img elements.

Edellä mainitussa artikkelissa käsitellään myös LONGDESC-attribuuttia (long description), joka mahdollistaa ALT-attribuutin täydennyksen erillisellä yksityiskohtaisemmalla kuvaselostuksella. Attribuutin arvoksi annetaan kuvaselostuksen osoite (URI).

WIDTH- ja HEIGHT -attribuuteilla voidaan ilmoittaa kuvan leveys ja korkeus. Arvoksi kelpaa Length-tietotyyppi, jolloin sekä kuvapisteet (koskevat kuvan mittasuhteita) että prosenttiluvut (koskevat käytettävissä olevaa tilaa) ovat sallittuja. Periaatteessa kuvien esityskokoa voidaan näillä attribuuteilla muunnella, mutta tämä on harvoin kannattavaa. Attribuutteja kannattanee käyttää vain suurien kuvien yhteydessä antamalla niiden arvoksi kuvien tarkat mitat kuvapisteinä. Tällöin selain voi varata kuvalle tarvittavan tilan ja jatkaa muun dokumentin lataamista, vaikka kuvainformaatio olisi vasta matkalla.

Seuraa IMG-elementin esimerkkikoodi, jossa esiintyvät kaikki tähän asti mainitut attribuutit:

<img
 src="../../js/code/js3/preload/desk160.jpg"
 alt="Vaihtoehtoinen teksti IMG-elementtiä
 havainnollistavalle esimerkkikuvalle."
 longdesc="../attribs/longdesc.htm"
 width="160"
 height="120" />

Esimerkkikoodimme tulostuu seuraavasti:

Vaihtoehtoinen teksti IMG-elementtiä havainnollistavalle esimerkkikuvalle.

Edistyneimmät asiakasohjelmat tarjoavat mekanismin LONGDESC-attribuutilla määritetyn kuvaselosteen saavuttamiseksi:

DocZilla-selain tarjoaa linkin kuvaselosteeseen kuvan ominaisuuksien kautta.

Kuvakartta-attribuutit

ISMAP- ja USEMAP-attribuutit määrittelevät kuvan kuvakartaksi.

ISMAP-attribuutilla (ismap="ismap") määritellään kuva palvelinpuolen kuvakartaksi (server side image map). Tällöin IMG-elementti sijoitetaan A-elementin lapseksi, jonka HREF-attribuutti viittaa palvelimen karttamäärityksiin. Kun näin määritettyä kuvaa klikataan, asiakasohjelma välittää palvelimelle klikatun kohdan x- ja y-koordinaatit osoitteen parametreina (osoite?x,y) joiden perusteella sitten palvelin jatkaa asianmukaisesti.

USEMAP-attribuutilla määritellään kuva asiakaspuolen kuvakartaksi (client side image map), jolloin kuvan karttamääritykset löytyvät MAP-elementistä . Attribuutin arvoksi annetaan MAP-elementin osoite (URI), yleensä yhteensopivuussyistä samasta dokumentista löytyvä kohdeankkuri (esim. usemap="#MunKartta").

Viimeinen sisältöpäivitys: 2010-02-28
Referenssin käyttöliittymät:
laaja | rakenteellinen | suppea

Kaikki XHTML1 Strict -elementit