Darba ar grafiku īpatnības Web-lapās

Nr.	Sadaļas nosaukums	Lpp.
	Darba ar grafiku Web-lappusēs praktiskie piemēri	3
	Attēlu ar noteiktiem numuriem samainīšana vietām	3
	Attēla samainīšana, uzvedot uz tā peles rādītājam	3
	Grafiskā izvelne ar iezīmētu punktu	4
	Attēlu iepriekšielādēšana	5
	Attēla tuvināšanas un attālināšanas efekti	6
	Grafisku objektu ar iepriekšielādēšanu secīga samainīšana	7
	Attēla pārvietošanās no kreisās puses uz labo	8
	Grafiskie efekti saistītie ar elementu pozicionēšanu Web-lappusē	10
	Attēlu pārvietošanās pārlūkprogrammas logā	10
	Attēla pārvietošanās pa apli	11
	Attēlu pārvilkšana pēc Drag-and-drop tehnoloģijas	12
	Attēla pārvietošanās kopā ar peles kursoru	13

Darba ar grafiku Web-lappusēs praktiskie piemēri
Katrs attēls, kas tiek iekļauts HTML-dokumentā, ir objekts image ar īpašībām, pie kurām var vērsties ar JavaScript scenāriju valodas palīdzību. Tagā var noteikt parametru Name un izmantot tā vērtību piekļūšanai pie attēla īpašībām.
Attēlu ar noteiktiem numuriem samainīšana vietām
Dokumentā ir ievietoti 4 attēli, 2 teksta lauki, kur lietotājs var ievadīt attēlu kārtas numurus,ko jāsamaina vietām, un ir arī poga, uzklikšķinot uz kurasizpildīsies šī pārvietošana. Ja attēlu numuru vērtības būs ievadīti nepareizi, parādīsies paziņojums par kļūdu.
Objekta document īpašība tiek noteikta ar to, ko satur pats dokuments. Ja dokumentā ir attēls, piekļūvi pie image objekta var iegūt ar taga Name vērtības palīdzību.
Objektam document ir īpašība images ar kuras palīdzību var vērsties pie jebkura attēla dokumentā, norādot tā kartes numuru (numurēšana sākās ar 0). Piekļūt pie pirmā attēla var ar document.images[0] instrūkcijas palīdzību, pie otrā - document.images[1] u.t.t.
HTML kods:

Attēlu galerija

Attēlus ar kārtas numuriem

un

Attēla samainīšana, uzvedot uz tā peles rādītājam
Kad lietotājs uzved uz attēla peles kursoru, rodas notikums MouseOver. Funkcija changePict() arī būs reākcija uz šo notikumu un noteiks, kādu attēlu jāievieto dokumentā. Izmantojamie attēli glabājas failos p1.gif, p2.gif, p3.gif un p4.gif. k-tā attēla ielādēšanai tiek izmantots faila vārds ”images1/p”+k+”.gif”.…