Izlecošie paskaidrojumi.

Šis apraksts ir paredzēts tikai kā vispārīgs apskats. Tas neaptver visu HTML un CSS iespēju uzskaitījumu. Šeit var būt iekļauti arī novecojoši piemēri un apgalvojumi.

Title

Lai izveidotu paskaidrojumu par kādu vārdu tekstā, piemēram par šo vārdu, var izmantot parametru „title”. Šo parametru var lietot dažādās komandās, piemēram, „span”, „a”, „img”. Lai uzreiz būtu ieraugāms, kuram vārdam ir pieejams šāds skaidrojums, tiek izmantota klase, kurā ir noteikts, ka vārds jāpasvītro ar punktētu līniju. Parametra vērtība kļūst redzama ilgāk paturot peles kursora virs attiecīgā vārda vai attēla. Labakā „title” īpašība – to saprot un parāda lielāka daļa mūsdienu pārlūku.

Izmantotie stili:

.ir_skaidrojums, .ka_kursors, .kvadraats{ border-bottom: 1px dotted navy; }

Pirmteksts:

<h2>Title</h2> Lai izveidotu paskaidrojumu par kādu vārdu tekstā, piemēram par šo vārdu, var izmantot parametru „<tt>title</tt>”. Šo parametru var lietot dažādās komandās, piemēram, „<code>span</code>”, „<code>a</code>”, „<code>img</code>”. Lai uzreiz būtu ieraugāms, kuram vārdam ir pieejams šāds skaidrojums, tiek izmantota klase, kurā ir noteikts, ka vārds jāpasvītro ar punktētu līniju. Parametra vērtība kļūst redzama ilgāk paturot peles kursora virs attiecīgā vārda vai attēla. Labakā „<tt>title</tt>” īpašība – to saprot un parāda lielāka daļa mūsdienu pārlūku.

Hover

Izmantojot hover notikumu un stilus, paskaidrojumu var izveidot daudz tīkamāku, kā, piemēram, šim vārdam Šis ir dotā vārda skaidrojums
Zemeslode . Kā redzams, paskaidrojumā var iekļaut kaut vai attēlus. Izveidotos stilus iespējams pielietot vairākkārtīgi, piemēram, arī šim vārdam Šis ir dotā vārda skaidrojums.
Uzklikšķini, lai atgrieztos lapā par stiliem. ir savs skaidrojums. Tajā, savukārt, atrodama norāde uz stilu aprakstu lapu.

Dotajā piemērā izveidotas divas klases – „ir_skaidrojums” un „skaidrojums”. Vārdam, kuram ir skaidrojums, ar komandu „span” piešķirta klase „ir_skaidrojums”. Savukārt pašam skaidrojumam piešķirta apakšklase „skaidrojums” iekļaujot otru komandu „span”.

Galvenās īpašības, kuras jāpiešķir šajām klasēm, ir:

Klasei „skaidrojums”:
- visibility: hidden; – sākotnēji paslēpj;
- position: absolute; – novieto virs pārējā lapas satura;
- display: block;, left: 3em;, right: 3em; – nodrošina, ka paskaidrojums „neizskries” ārpus pārlūka loga un būs aizsniedzami paskaidrojumā ievietotie interaktīvie elementi.

Skaidrojumu padara redzamu sekojošais klases apraksts:

		.ir_skaidrojums:hover .skaidrojums {
			visibility: visible;
		}

«Microsoft Internet Explorer 10» īpatnība – paskaidrojums parādās tikai tad, kad uz dotā vārda uzklikšķina, bet vecākām versijām vispār neparādās.

Izmantotie stili:

.ir_skaidrojums, .ka_kursors, .kvadraats{ border-bottom: 1px dotted navy; } .skaidrojums { visibility: hidden; position: absolute; display: block; left: 3em; right: 3em; margin-top: -3px; padding: 2em; border-radius: 9px; background: rgba(255,255,0,0.9); color: black; border: 2px solid rgba(0,0,128,0.4); z-index: 2; } .ir_skaidrojums:hover { color: red; cursor: help; text-decoration: none; } .ir_skaidrojums:hover .skaidrojums { visibility: visible; } /* Nepieciešams IE lietotājiem */ .ir_skaidrojums:active .skaidrojums { visibility: visible; }

Pirmteksts:

<h2>Hover</h2> Izmantojot <code>hover</code> notikumu un stilus, paskaidrojumu var izveidot daudz tīkamāku, kā, piemēram, šim vārdam Šis ir dotā vārda skaidrojums <img src=./att/e_01-31_m.ani.gif width=83 height=80 border=0 hspace=21 vspace=21 title="Ši ir Zemeslode" alt="Zemeslode">. Kā redzams, paskaidrojumā var iekļaut kaut vai attēlus. Izveidotos stilus iespējams pielietot vairākkārtīgi, piemēram, arī šim vārdam Šis ir dotā vārda skaidrojums. <a href=stili.shtml>Uzklikšķini, lai atgrieztos lapā par stiliem.</a> ir savs skaidrojums. Tajā, savukārt, atrodama norāde uz stilu aprakstu lapu. Dotajā piemērā izveidotas divas klases – „ir_skaidrojums” un „skaidrojums”. Vārdam, kuram ir skaidrojums, ar komandu „<code>span</code>” piešķirta klase „ir_skaidrojums”. Savukārt pašam skaidrojumam piešķirta apakšklase „skaidrojums” iekļaujot otru komandu „<code>span</code>”. Galvenās īpašības, kuras jāpiešķir šajām klasēm, ir: <ul> <li>Klasei „skaidrojums”: <ul> <li><code>visibility:</code> <tt>hidden;</tt> – sākotnēji paslēpj;</li> <li><code>position:</code> <tt>absolute;</tt> – novieto virs pārējā lapas satura;</li> <li><code>display:</code> <tt>block;</tt>, <code>left:</code> <tt>3em;</tt>, <code>right:</code> <tt>3em;</tt> – nodrošina, ka paskaidrojums „neizskries” ārpus pārlūka loga un būs aizsniedzami paskaidrojumā ievietotie interaktīvie elementi.</li> </ul> </li> <li>Skaidrojumu padara redzamu sekojošais klases apraksts: <pre> .ir_skaidrojums:hover .skaidrojums { visibility: visible; } </pre> </li> </ul> «Microsoft Internet Explorer 10» īpatnība – paskaidrojums parādās tikai tad, kad uz dotā vārda uzklikšķina, bet vecākām versijām vispār neparādās.

Cursor

Vēl pastāv iespēju kā vārda paskaidrojumu izmantot attēlu nomainot peles kursoru, kad tas ir virs attiecīgā vārda. Kursoru izskatu nosaka parametrs cursor: , kuram kā vērtību var norādīt kursora nosaukumus (default, crosshair, help u.t.t.) vai arī atbilstošu attēlu (url(..)). Lietojot senus pārlūkus, jārēķinas, ka šīs iespējas atbalsts ir nepilnīgs. «Internet Explore» spēj parādīt tikai Windows kursoru failus (*.cur), nevis attēlus, «Opera» līdz pat 12.16. versijai (ieskaitot) neizmanto url(). Kādreizt uz «Chromium» bāzētie pārlūki sevi bija ierobežojuši ar attēla izmēru (32 × 32 pikseļi). Tagad tiek parādīti arī lielāki attēli.

Izmantotie stili:

.ir_skaidrojums, .ka_kursors, .kvadraats{ border-bottom: 1px dotted navy; } .ka_kursors { cursor: url(att/OpenClipart.org_johnny_automatic_look_it_up.png), help; } .kvadraats { cursor: url(att/smaidulis.png), url(att/smaidulis.cur), help; }

Pirmteksts:

<h2>Cursor</h2> Vēl pastāv iespēju kā vārda paskaidrojumu izmantot attēlu nomainot peles kursoru, kad tas ir virs attiecīgā vārda. Kursoru izskatu nosaka parametrs <code>cursor: </code>, kuram kā vērtību var norādīt kursora nosaukumus (<tt>default, crosshair, help</tt> u.t.t.) vai arī atbilstošu attēlu (<tt>url(..)</tt>). Lietojot senus pārlūkus, jārēķinas, ka šīs iespējas atbalsts ir nepilnīgs. «Internet Explore» spēj parādīt tikai Windows kursoru failus (*.cur), nevis attēlus, «Opera» līdz pat 12.16. versijai (ieskaitot) neizmanto <code>url()</code>. Kādreizt uz «Chromium» bāzētie pārlūki sevi bija ierobežojuši ar attēla izmēru (32 × 32 pikseļi). Tagad tiek parādīti arī lielāki attēli.


Pamatlapa	BF	Padomi	Sākums

Lappuse labota: 2026.08.18

Lapa ir publicēta ar CC BY–SA 4.0 licenci. Ja lapā ir ietvertas daļas uz kurām attiecas cita licence, tas norādīts atsevišķi lapas tekstā.