IMG-elementti XHTML 1.0 Strict -dokumenttityypissä
IMG-elementillä (inline image) merkitään upotetut 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.
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:
Edistyneimmät asiakasohjelmat tarjoavat mekanismin LONGDESC-attribuutilla määritetyn kuvaselosteen saavuttamiseksi:
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").