Rastrattēlu ievietošana

Pamatnes attēli
Attēli tekstā
Pieraksti pie attēla
Attēlu ievietošana izmantojot stilu lapas
Attēla daļas parādīšana
Aktīvie attēli, attēlu kartes

Atruna: turpmāk šajā lapā rastrattēli tiks saukti vienkārši par attēliem.

Pamatnes attēli

Attēli var tikt ievietoti lapā kā atsevišķi objekti (kā teksta sastāvdaļa), vai arī tie var kalpot kā pamatnes aizpildījums (tapetes) gan pašai lapai, gan tabulai un tās daļām, kā tas redzams piemēra pa labi. Pamatnes attēlu ievieto ar parametra background palīdzību. Būtiski attēlu pielietojamību paplašina stilu izmantošana. To liecina kaut vai šīs rindkopa, kuras pamatni veido attēls. Stilu gadījumā pamatnes attēlu uzdod ar parametru background-image norādot attēla relatīvo vai absolūto adresi (URL). Šajā rindkopā ir izmantota iespēju, ka stilus var uzdot pa tiešo pašam objektam: <p style="background-image: url(/atteli/pamati/Vienmerigi/G_da_paareja.jpg); background-color: #BBFFDD;">. CSS 3 paredz, ka vienmērīgas krāsu pārejas būs iepējams izveidot ar stilu palīdzību norādot pārejas veidu (linear, radial, repeating-linear, repeating-radial), leņķi un krāsas. Nelielu piemēru var aplūkot šeit.

Pamatnes attēlam jābūt saskaņotam ar tekstu un citiem lapā esošajiem objektiem. Uz spilgtas vai raibas pamatnes grūti ko redzēt. Ja lieto pamatnes attēlu, tad jārēķinās ar to, ka ne vienmēr attēls var būt pieejams. Tādēļ objektam, kam kā pamatne uzdots attēls, jānorāda arī pamatnes krāsa, kas tonāli ir līdzīga attēlam (HTML parametrs bgcolor, CSS parametrs background-color).

Attēli tekstā

Attēlu tekstā ievieto ar komandu IMG. Ja bez paša attēla netiek uzrādīti citi parametri, attēls tiek ievietots kā rakstzīme attēla patiesajā izmērā (atbilstoši pikseļiem): <img src=/atteli/mazini/Dzivnieki/suns.gif>. Šai komandai nav noslēdzošās komandas. Lai paātrinātu lapas parādīšanu, attēlam jānorāda tā augstums un platums (height un width parametri). Ja tiek norādīts tikai viens no šiem parametriem, otru pārlūks izrēķina pats atbilstoši attēla platuma un augstuma attiecībai. Iespējams norādīt arī savādākus attēla izmērus, nekā tie ir patiesībā: <img src=/atteli/mazini/Dzivnieki/suns.gif width=25% height=12pt> . Ja izmēri norādīti procentos, tad attēla parādīšanas izmērs būs atkarīgs no atvelētās vietas, nevis no paša attēla izmēriem. To var pārliecināties pēc šajā rindkopā iekļautā suņa zīmējuma, kuram platums bija norādīts 25%. Mainotis ekrāna platumam, mainās arī suņa garums.

Ja attēla izmēram ir jābūt saskaņotam ar tekstu, jāizmanto 'em' vai 'ex' mērvienības. Lai šīs mērvienības būtu pareizi saskaņotas ar patreiz izamntotā fonta izmēru, attēla izmērs jānorāda izmantojot stilu, piemēram, <img style="height: 0.8em;" src=/atteli/mazini/Dzivnieki/suns.gif>. Tā kā burts „M” ir platāks nekā augstāks, tad attēla augstums ir uzdots mazāks par vienu. Ja maina fonta izmēru, <span style="font-size: 140%;">tad mainās arī attēla izmērs: <img style="height: 0.8em;" src=/atteli/mazini/Dzivnieki/suns.gif></span>

Iespēju uzrādīt citus attēla izmērus nevajadzētu izmantot ļaunprātīgi, piemēram, ievietojot fotoalbuma priekšapskates lapā milzīgu attēlu un samazinot to ar height un width palīdzību. Šādā gadījumā jābūt vismaz divām attēlu versijām – lielai un mazai, kuru izveido izmantojot atbilstošu rastrattēla redaktoru, piemēram, GIMP. Priekšapskates lapā tad tiek ievietots attēla mazā versija. Uzklikšķinot ar peli, var aplūkot attēlu pilnā izmērā.

Attēliem, var uzrādīt, kurā malā tai jāatrodas (ALIGN=left|right). Teksts, kas seko aiz dotā attēla, šādam attēlam „aptek” apkārt. Brīvo telpu starp tekstu un attēlu nosaka parametri HSPACE (no abām malām) un VSPACE (augšai un apakšai). Tādējādi iepriekšējam attēlam ir jābūt redzamam pa kreisi no šīs rindkopas. Parametrs BORDER nosaka rāmja platumu ap attēlu. Parasti pēc noklusējuma šī parametra vērtība ir '0'. Izņemot tikai tajā gadījumā, kad attēls kalpo arī kā norāde. Tad rāmja platums pēc noklusējuma ir '1'. Ja nevēlas, lai rāmis būtu redzams, tad jānorāda, ka tā platums ir '0'. Ar parametru ALT var norādīt tekstu, kurš tiek rādīts attēla vietā, ja attēls nav pieejams. Parametra TITLE vērtība ir teksts, kas parādās, ja ilgāku laiku patur peles kursoru virs attēla (tool tip text).

Daudz plašākas iespējas izkārtot lapā attēlus un citus objektus dod stili. Pa labi no šīs rindkopas ir jābūt redzamam attēlam, kuru novietojumu nosaka atbilstoši stila parametri: <img src=/atteli/tapetes/noskanja/lapa.m.jpg style="float: right; padding: 21 0 21 21;" title="Rudenīgas noskaņas" alt="Lapa">. Teksta redaktoru izpratnē var teikt, ka attēls ir ticis ievietots rāmī. Parametrs float nosaka gan to, kur atradīsies attēls, gan to, ka pamatlapā esošais (neierāmētais) saturs nebūs pa virsu (vai zem) šī attēla. Parametrs padding nodrošina brīvo telpu ap attēlu.

Pieraksti pie attēla

Slapjdraņķis

Ja pie attēla jāpievieno uzraksti, tad, lai saturētu kopā attēlu ar uzrakstu, tos abus var ievietot tabulā. Vairāk par to lasīt sadaļā „Teksta un attēlu izkārtošana lapā izmantojot tabulas”. Var, protams, veidot arī atsevišķu lapu un pamatlapā to ievietot ar komandas IFRAME palīdzību.

Savukārt, lai izkārtojumam varētu izmantot stilus, attēlu ar tekstu apvieno ar <div> piešķirot attiecīgos stila parametrus. Iespējams piešķirt vērtības arī parametriem, kuri tiešā veidā neattiecas uz attēlu, piemēram, fonta veidu un izmēru. Atliek izveidot un izmantot atbilstošu klasi, lai visi tekstā ievietotie attēli un paraksti zem tiem izskatītos vienādi. Pa kreisi redzamais attēls ar parakstu zem tā lapā ievietots šādi:

<div style="
	position: relative;
	float: right;
	top: -9;
	padding: 9 9 16 9;
	margin: 0 0 21 21;
	font-style: italic;
	font-size: 80%;
	border: thin solid grey;
	background: lightgray;
	line-height: 2;
	">
	<img src=/atteli/tapetes/noskanja/lietus.m.jpg
	title="Izkusušais sniegs uz loga rūts" alt="Loga rūts"
	>
	<br>Slapjdraņķis
</div>

Attēlu ievietošana izmantojot stilu lapas

Ar stilu aprakstu palīdzību var ne tikai ievietot attēls pamatnē, bet arī iespējams novietot pirms vai pēc dotā objekta (:before, :after) Šādi, piemēram, var izcelt virsrakstus vai tekstā iekļautas norādes. Šādi iespējams pievienot gan attēlu gan tekstu.

<STYLE>
<!--
	.izpuskoti A:before {
		content: url(/atteli/icons/majina.gif) ' ';
	}
	.izpuskoti A:after {
		content: ' ' url(/atteli/icons/Bultas/r_arrow_m.gif);
	}
	.izpuskoti H4:before {
		content: url(/atteli/bullets/Dzivnieki/taurins_p.png) ' Nodaļa: ';
	}
-->
</STYLE>
<DIV class="izpuskoti">
	<h4>Izveidotās klases piemērs</h4>

	<p>Dotajā piemērā pirms visām norādēm, uz kurām attiecināma klase
	<tt>.izpuskoti</tt> (nosaka <tt>DIV</tt>) redzama mājiņa, bet aiz
	tām&nbsp;– bultiņa. Savukārt ceturtās pakāpes virsraksti sākas ar
	tauriņa attēlu, pēc kura seko uzraksts „ Nodaļa: ”. Vairāk par stilu
	izmantošanu skatīt nodaļā „<a href=stili.shtml>Stili</a>”.</p>

</DIV>

	

Tāpat var aizstāt sarakstos „bumbiņas”, piemēram, izveidojot klasi .augusaraksts { list-style-image: url(/atteli/bullets/Augi/potplant.gif);}. Pēc tam tekstā UL komandai jāpiešķir atbilstošā klase.

<STYLE>
<!--
.augusaraksts {
	list-style-image: url(/atteli/bullets/Augi/potplant.gif);
}
-->
</STYLE>

<ul class=augusaraksts>
	<li>Pirmais ieraksts</li>
	<li>Otrais ieraksts</li>
</ul>
	

Bumbiņām vajadzētu būt aizstātām ar attēliņiem:

Ja stilā uzrādītais attēls nav atrodams, tad saraksts tiek parādīts kā parasts bumbiņsaraksts.

Attēla daļas parādīšana

Izmantojot stilus, iespējams parādīt tikai daļu no attēla. Attēlu daļu „izgriešanu” var izmantot, piemēram, lai visus mazos attēliņus, kuri tiek izmantoti dotajā lapā, varētu glabāt vienā failā. Līdz ar to ir nepieciešams tikai viens pieprasījums, lai lapas pārlūks iegūtu šo attēlus no servera. Ļoti apmeklētiem serveriem tas ļauj nedaudz samazināt noslodzi. Kā citu piemēru varētu minēt nepieciešamība vienādot izmērus visiem parādāmajiem attēliem. Izmantojot attēla parametrus width un height, pastāv iespēja izmainīt attēla platuma/augstuma attiecību. Ja tas nav pieņemami, tad vienkāršākais veids, kā to atrisināt, ir „izgriezt” no attēla noteikta izmēra laukumu. To var panāk izveidojot objektu, kuram kā pamatni ievieto vajadzīgo attēlu un nosaka noteiktu objekta platumu un augstumu, kā arī pamatnes novietojumu attiecībā pret objektu.

Piemēram, pa kreisi redzamais attēls patiesībā ir daudz lielāks. Izveidojot atbilstošu stila klasi (piemērā: .saule), ir panākts, ka rāda tikai daļu no attēla. Stila parametru vērtības un skaidrojumus skatīt tālāk tekstā stilu lapas izdrukā. Attēlu ievieto piešķirot sadaļai izveidoto klasi: <div class=saule></div>.

Papildinot ieprēkšējo piemēru var panākt, lai, virzot peles kursoru pari attēlam, tiktu rādīts cits attēla fragments. Piemēram, virzot peles kursuru parī attēlam, kas redzams pa labi, atsevišķas attēlu daļas „iegūst” krāsu. Šo iespēju var izmantot grafisku izvēļnu veidošanai.

Diezgan bieži lapu noformēšanas sīkattēliņus glabā vienā lielā attēlā attiecīgi parādot tikai vajadzīgo lielā attēla daļu. Angliski šo lielo attēlu sauc par „sprite sheet” vai „tile set”, bet atsevišķu attēlu fragmentu par „sprite” vai „tile”. Šāda pieeja uzlabo ātrdarbību, jo serverim daudzu mazu failiņu vietā jāpārsūta tikai viens fails.

.saule {
	
/* dotais objekts būs fiksēta izmēra */
	display: block;
	
/* objekts atradīsies pa kreisi no teksta */
	float:left;
	
/* brīvā telpa ap objektu */
	margin:0.3em 2em 1em 0.5em;
	
/* ap objektu apvilktais rāmis */
	border:9px solid black;
	
/* objekta platums un augstums */
	width: 100px;
	height: 100px;
	
/* objekta pamatnes attēls */
	background-image: url(../att/Kolka_2005.07.27.jpg);
	
/* pamatnes attēla sākuma koordinātas */
	background-position: -140px -60px;
	}

.pamatattels {
	
/* pamatatēla novietojums ir relatīvs attiecībā pret tekstu */
	position: relative;
	display: block;
	float:right;
	margin:0.3em 0.5em 1em 2em;
	width: 400px;
	height: 250px;
	background-image: url(../att/Kolka_2005.07.27.jpg);
	background-position: 400px 0px;
	}

.pamatattels a {
	
/* uznirstošo attēlu novietojums ir absolūts attiecībā pret pamatatēlu */
	position: absolute;
	}

/* Aktīvais laukums */
.debesis a {
	
/* uznirstoša attēla kreisā augšēja stūra novietojums */
	left:0px;
	top: 0px;
	width: 400px;
	height: 124px;
	}

/* Uznirstošais attēls */
.debesis a:hover {
	background-image: url(../att/Kolka_2005.07.27.jpg);
	background-position: 0px 0px;
	}

.vidus a {
	left:140px;
	top: 60px;
	width: 100px;
	height: 100px;
	}

.vidus a:hover {
	background-image: url(../att/Kolka_2005.07.27.jpg);
	background-position: -140px -60px;
	}

.zeme a {
	left: 0px;
	top: 125px;
	width: 400px;
	height: 122px;
	}

.zeme a:hover {
	background-image: url(../att/Kolka_2005.07.27.jpg);
	background-position: 0px -125px;
	}

	

<div class=pamatattels>
	<div class=zeme><a name=paraugs2 title="Zeme"></a></div>
	<div class=debesis><a name=paraugs1 title="Debesis"></a></div>
	<div class=vidus><a name=paraugs3 title="Saule"></a></div>
</div>
	

Izmantojot CSS, patstāv arī citas iespējas, kā parādīt tikai daļu no attēla, piemēram, izmantojot parametru „clip”. Šī parametra vērtība ir funkcija rect(Y_min, X_max, Y_max, X_min) pieņemot, ka pikseļus sāk skaitīt no attēla augšējā kreisā stūra. Jāatceras, ka daļas izgriešanai tiek lietotas absolūtās koordinātas, tadēļ attēls jāievieto savā sadaļā (konteinerī) (<DIV>..</DIV>).

.tikai_saule{
	position: absolute;
	clip: rect(72, 226, 148, 146);
	top: -64;
	left: -137;
}
.ietvars {
	position: relative;
	display: block;
	width: 98;
	height: 94;
	border: 6px solid black;
	left: 200;
	background-color: white;
}
	

<div class=ietvars>
	<img class=tikai_saule src=att/Kolka_2005.07.27.jpg title="Saulriets Kolkā">
</div>
	

Rezultāts:

Pamatlapa BF Datorklase Sākums	Lappusi «atteli.shtml» veidoja karlo@lanet.lv 2019.11.08-08:25