Tegs IMG
| Pārlūks |  Internet Explorer |
 Netscape |
 Opera |
 Safari |
 Firefox |
|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Versija | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Atbalsts | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Tegs <IMG> paredzēts attēlu izvadīšanai web-lapās grafiskajos formātos GIF, JPEG vai PNG. Šim tegam ir viens obligātais parametrs src, kurš uzstāda adresi failam ar attēlu. Ja nepieciešams, attēlu var izveidot kā hipersaiti uz citu failu, ievietojot tegu <IMG> konteinerī <A>. Pie kam ap attēlu kļūst redzams rāmītis, kuru var atslēgt, pievienojot parametru border="0" tegam <IMG>.
Attēli var tikt izmantoti arī kā attēli-kartes, kad attēls satur aktīvos apgabalus, kuri darbojas kā hipersaites. Tāda karte pēc ārējā izskata ne ar ko neatšķiras no parasta attēla, tajā pat laikā tas var tikt sadalīts dažādas formas neredzamās zonās, no kurām katra kalpo par hipersaiti.
Sintakse
<img src="URL" alt="">
Parametri
- align
- Nosaka attēla izlīdzinājumu pēc malām un tā iekļaušanos apkārtējā tekstā.
- alt
- Attēla alternatīvais teksts.
- border
- Rāmīša biezums ap attēlu.
- height
- Attēla augstums.
- hspace
- Horizontālā atkāpe no attēla līdz apkārtējam saturam.
- ismap
- Paziņo pārlūkam, ka attēls ir karte-attēls.
- lowsrc
- Ceļš uz zemas kvalitātes grafisko failu, kurš kalpo priekšapskatei.
- src
- Ceļš uz grafisko failu.
- vspace
- Vertikālā atkāpe no attēla līdz apkārtējam saturam.
- width
- Attēla platums.
- usemap
- Saite uz tegu <MAP>, kurš satur kartes-attēla koordinātes.
Aizverošais tegs
Nav nepieciešams.
Piemērs 1. Tega <IMG> izmantošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG</title>
</head>
<body>
<p><a href="lorem.html"><img src="images/girl.png"
width="189" height="255" alt="lorem"></a>
Lorem ipsum dolor sit amet...</p>
</body>
</html>Tega <IMG> parametru apraksts
Parametrs ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Attēliem var norādīt to izvietojumu attiecībā pret tekstu vai citiem elementiem web-lapā. Attēla izlīdzināšanas metodi nosaka tega <IMG> parametrs align.
Sintakse
<img align="bottom | left | middle | right | top">
Argumenti
Tabulā uzskaitīti iespējamie parametra align varianti un to darbības rezultāts.
| Vērtība | Apraksts | Piemērs |
|---|---|---|
| bottom | Attēla apakšējās malas izlīdzināšana pēc apkārtējā teksta. | Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit... |
| left | Attēla izlīdzināšana pēc loga kreisās malas. | Lorem
ipsum dolor sit amet, consectetuer adipiscing elit... |
| middle | Attēla vidusdaļas izlīdzināšana pēc tekošās rindas bāzes līnijas. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
| right | Attēla izlīdzināšana pēc loga labās malas. | Lorem
ipsum dolor sit amet, consectetuer adipiscing elit... |
| top | Attēla augšējā robeža tiek izlīdzināta pēc tekošās rindas paša augstākā elementa. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
Paši populārākie parametri — left un right, kas nosaka teksta izvietošanu ap attēlu.
Noklusētā vērtība
bottom
Piemērs 2. Attēla izlīdzināšana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs align</title>
</head>
<body>
<p><img src="/images/square.gif" alt="Квадрат" width="20" height="20"
align="right"> Lorem ipsum dolor sit
amet, consectetuer adipiscing elit...</p>
</body>
</html>Piezīme
Papildus argumenti absbottom, absmiddle, baselineun un texttop tiek saprasti no pārlūku puses, bet netiek atbalstīti HTML 4.x/XHTML 1.0 specifikācijā.
Parametrs ALT
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Parametrs alt uzstāda alternatīvo tekstu attēlam. Šāds teksts ļauj attēlot informāciju par attēlu, ja pārlūkā ir atslēgta attēlu ielāde. Par cik attēlu ielāde notiek pēc tam, kad pārlūks saņēmis informāciju par tiem, attēlu aizvietojošais teksts parādīsies agrāk. Turpinoties ielādei, teksts tiks aizvietots ar attēlu.
Pārlūki šo tekstu mēdz attēlot arī kā "uzpeldošu" tekstu, kurš kļūst redzms, uzvedot peles kursoru uz attēla.
Sintakse
<img alt="teksts">
Argumenti
Jebkura teksta rinda. Tai obligāti jāatrodas pēdiņās.
Obligāts parametrs
Jā.
Noklusētā vērtība
Nav.
Piemērs 3. Alternatīvā teksta pievienošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs alt</title>
</head>
<body>
<p><a href="/index.php"><img src="images/home.gif" alt="Вернуться
на главную страницу"></a></p>
</body>
</html>Parametrs BORDER
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Web-lapā iekļaujamo attēlu var ievietot dažāda platuma rāmītī. Tam kalpo tega <IMG> parametrs border. Pēc noklusējuma rāmītis ap attēlu nav redzams, izņemot gadījumu, kad attēls kalpo kā hipersaite. Pie kam rāmīša krāsa sakrīt ar hipersaišu krāsu, kuras uzstādītas ar stilu palīdzību vai tega <BODY> parametru link.
Lai novāktu rāmīti, jāuzstāda parametrs border="0".
Sintakse
<img border="rāmīša biezums">
Argumenti
Jebkurš vesels pozitīvs skaitlis pikseļos.
Noklusētā vērtība
0
Piemērs 4. Rāmītis ap attēlu
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs border</title>
</head>
<body text="#00ff00">
<p><img src="/images/sample.gif" width="50" height="50"
border="2" alt=""></p>
</body>
</html>Parametrs HEIGHT un WIDTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Lai izmainītu attēla izmērus ar HTML līdzekļiem, paredzēti parametri height un width. Vērtības pieļaujams izmantot kā pikseļos, tā procentos. Ja izmantots procentu pieraksts, attēla izmēri tiek izskaitļoti attiecībā pret primāro elementu — konteineri, kurā atrodas tegs <IMG>. Ja nav primārā elementa, kā tāds tiek uzskatīts pārlūka logs. Citiem vārdiem, width="100%" nozīmē, ka attēls būs izstiepts visas web-lapas platumā. Ja tiek pievienots tikai viens no parametriem width vai height, tiek saglabātas attēla proporcijas un malu attiecība. Pie kam pārlūks sagaida attēla pilnu ielādi, lai noteiktu tā pirmatnējos izmērus.
Noteikti uzstādiet visu web-lapā esošo attēlu izmērus. Tas paātrina lappuses ielādi, jo pārlūkam nav jāizskaitļo katra attēla izmēri pēc tā saņemšanas. Īpaši svarīgi tas ir attiecībā uz attēliem, kuri atrodas tabulās.
Attēla platumu un augstumu var mainīt kā uz augstāko, tā uz zemāko pusi. Tomēr attēla ielādi tas nekā neietekmē, jo faila izmērs paliek nemainīgs. Tāpēc uzmanīgi samaziniet attēlu, jo tas var izbrīnīt lietotājus, ka tāds neliels attēls tik ilgi lādējas. Bet izmēra palielināšana noved pie pretējā efekta — attēls ir liels, bet fails ielādējas ātrāk, nekā līdzīga izmēra attēla gadījumā. Tomēr attēla kvalītāte šajā gadījumā zūd.
Sintakse
<img height="augstums"> <img width="platums">
Argumenti
Jebkurš vesels pozitīvs skaitlis pikseļos vai procentos.
Noklusētā vērtība
Attēla sākotnējie izmēri.
Piemērs 5. Attēla izmēri
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs width</title>
</head>
<body>
<p><img src="/images/sample.gif" width="350" height="250" alt=""></p>
</body>
</html>Parametrs HSPACE и VSPACE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Jebkuram attēlam var uzstādīt neredzamas atkāpes pa horizontāli vai vertikāli ar parametru hspace un vspace palīdzību. Īpaši aktuāli tas ir tad, ja ap attēlu izvietojas teksts. Šādā gadījumā, lai teksts "nepieliptu" pie attēla, tam apkārt jāizveido atkāpes.
Sintakse
<img hspace="horizontālā atkāpe" vspace="vertikālā atkāpe">
Argumenti
Jebkurš vesels pozitīvs skaitlis pikseļos.
Noklusētā vērtība
0
Piemērs 6. Atkāpes ap attēlu
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs hspace</title>
</head>
<body>
<p><img src="/images/sample.gif" width="150" height="150"
hspace="5" vspace="7" alt="" align="left"></p>
<p>Пример обтекания картинки текстом</p>
</body>
</html>Parametrs ISMAP
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Parametrs ismap paziņo pārlūkam, ka attēls ir servera karte-attēls. Kartes-attēli ļauj viena attēla dažādus apgabalus izmantot kā hipersaites. Tas tiek realizēts divos dažādos variantos — servera un klienta pusēs. Ja tiek izmantots servera variants, pārlūks sūta pieprasījumu uz serveri, lai saņemtu izvēlētās saites adresi un gaida atbildi ar nepieciešamo informāciju. Tāda pieeja prasa papildus laiku, gaidot rezultātu un atsevišķus failus priekš katras kartes-attēla.
Datu nosūtīšana uz serveri notiek šādi. Tegs <IMG> jāievieto konteinerī <A>, kuram kā parametra href vērtība jānorāda CGI-programmas adrese. Programma analīzē peles koordinātes "klikšķa" brīdī, kuras tiek skaitītas no attēla kreisā augšējā stūra, pēc kam atgriež datus noteiktajai web-lapai.
Sintakse
<img ismap>
Argumenti
Nav.
Noklusētā vērtība
Pēc noklusējuma šis parametrs ir izslēgts.
Piemērs 7. Parametrs ismap izmantošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs ismap</title>
</head>
<body>
<p><a href="http://www.htmlbook.ru/html/example/ismap.php"><img src="/images/sample.gif"
alt="" width="150" height="150" ismap></a></p>
</body>
</html>Ja peles koordinātes uz attēla ir 100, 50, tad pēc "klikšķa" uz saites tiks atvērts fails ar adresi http://www.htmlbook.ru/cgi-bin/map.cgi?100,50. Pēdējie cipari tiek nodoti CGI-programmai ar GET metodi un interpretējas servera pusē.
Parametrs SRC
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Grafiskā faila adrese, kurš tiks attēlots web-lapā. Vispopulārākie ir GIF un JPEG formātu attēli.
Sintakse
<img src="URL">
Obligāts parametrs
Jā.
Argumenti
Kā vērtība var būt absolūtais vai relatīvais ceļš uz failu.
Noklusētā vērtība
Nav.
Piemērs 8. Ceļš uz grafisko failu
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs IMG, parametrs src</title>
</head>
<body>
<p><img src="http://htmlbook.ru/images/logo.gif" width="450" height="450" alt=""></p>
</body>
</html>
