Kā izveidot mijmaiņas darījumus ar vairākiem attēliem programmā Dreamweaver

Pirms sākat veidot sarežģītāku lapas dizainu, izmantojot Dreamweaver Swap Image darbību, apskatiet gatavo lapu. Izmantojot funkciju Apmainīt attēlu, varat aizstāt jebkuru vai visus lapas attēlus.

Kad izmantojat funkciju Mainīt attēlu, ir svarīgi, lai visi attēli, kurus mainīsit, būtu vienādi (augstums un platums). Ja attēli nav vienāda izmēra, visi attēli, izņemot pirmo, tiks izstiepti vai saspiesti, lai tie atbilstu vietai, ko aizņem pirmais lapā ievietotais attēls.

Ja izmantojat funkciju Apmainīt attēlu ar attēlu sēriju, kas nav vienāda augstuma un platuma, jums ir dažas iespējas:

Apgrieziet lielākos attēlus, lai visi attēli būtu vienāda izmēra.

Padariet horizontāliem un vertikāliem attēliem vienādu vietu jūsu dizainā, apvienojot divus vertikālus attēlus katram horizontālajam attēlam. Vienkārši izveidojiet failu programmā, piemēram, Photoshop, ievietojiet divus vertikālus attēlus vienā un tajā pašā failā blakus un pēc tam izvēlieties attēla izmēru tā, lai fails būtu vienāds ar vienu horizontālu attēlu.

Izveidojiet vienu attēla failu lielākā attēla izmērā, iestatiet fonu uz neitrālu krāsu, piemēram, melnu vai baltu, un pēc tam ievietojiet visus pārējos attēlus fonā, lai tos visus varētu saglabāt vienā faila lielumā.

Lai izmantotu attēla maiņas darbību, veiciet šīs darbības:

1Izveidojiet lapas dizainu ar visiem attēliem, kurus sākotnēji vēlaties parādīt.

Katrai no trim fotogrāfijām Londonas Tauera tilta lapas dizainā ir divas kopijas: viens sīktēls un viena lielāka versija. Kad lapa pirmo reizi tiek ielādēta tīmekļa pārlūkprogrammā, visi trīs sīktēli tiek novietoti lapas apakšā, un pirmā no attiecīgajām lielākajām versijām tiek parādīta galvenajā apgabalā tieši virs sīktēliem.

2. Īpašuma inspektorā piešķiriet saviem attēliem nosaukumus.

Lai atlasītu attēlus, izmantojot JavaScript, kas darbojas šādi, vispirms piešķiriet katram attēlam unikālu ID. Attēla ID nav tas pats, kas attēla faila nosaukums vai teksta atzīme, lai gan varat izmantot tādus pašus vai līdzīgus nosaukumus. Attēlu ID nedrīkst saturēt atstarpes vai īpašas rakstzīmes.

3Izvēlieties Logs → Uzvedība.

Tiek atvērts panelis Behaviors. Varat vilkt uzvedības paneli citur lapā, un varat to izvērst, velkot tā apakšā vai sānos. Varat arī aizvērt visus citus atvērtos paneļus, lai atbrīvotu vietu, jebkura paneļa augšdaļā noklikšķinot uz tumši pelēkās joslas.

4Atlasiet attēlu.

Lapā atlasiet attēlu, kas kalpos kā darbības aktivizētājs.

5 Izvēlieties attēla maiņas darbību.

Kad darbvietā ir atlasīts aktivizētāja attēls, panelī Uzvedības noklikšķiniet uz pluszīmes, lai atvērtu darbību nolaižamo sarakstu, un izvēlieties darbību, kuru vēlaties lietot.

6 Dialoglodziņā Swap Image norādiet apmaināmos attēlus.

Attēlu sarakstā atlasiet attēla ID, kas tiks aizstāts. Noklikšķiniet uz pogas Pārlūkot, lai atlasītu attēlu, kas aizstāj galveno attēlu. Ja attēls vēl nav saglabāts vietējā vietnes mapē, Dreamweaver piedāvās jums to kopēt tur.

7 Dialoglodziņa Apmainīt attēlu apakšā atlasiet opciju Priekšielādēt attēlus, lai norādītu pārlūkprogrammai visus attēlus ielādēt kešatmiņā, kad lapa tiek ielādēta.

Ja šo opciju neizvēlaties, var rasties aizkave, kad tiek izmantota attēla mijmaiņas funkcija.

8Ja vēlaties, noņemiet atzīmi no opcijas Atjaunot attēlus OnMouseOut.

Opcija Atjaunot attēlus OnMouseOut nozīmē, ka, kad notikums ir pabeigts (piemēram, kad pele tiek pārvietota no aktivizējošā sīktēla), sākotnējais attēls tiek aizstāts. Pēc noklusējuma Dreamweaver iepriekš atlasa šo opciju attēla maiņas darbībai. Iespējams, vēlēsities atcelt šīs opcijas atlasi, ja uzskatāt, ka sākotnējā attēla aizstāšana katru reizi, kad virzāt kursoru virs cita sīktēla, novērš uzmanību.

9 Kad esat norādījis visus darbības iestatījumus, noklikšķiniet uz Labi.

Jaunā darbība tiek parādīta panelī Behaviors.

10 Norādiet uzvedības notikumu.

Kad darbība ir piemērota, varat atgriezties un norādīt, kurš notikums aktivizēs darbību. Pēc noklusējuma Dreamweaver lieto notikumu OnMouseOver, kad izmantojat darbību Mainīt attēlu, taču jūs varat mainīt šo notikumu uz jebkuru pieejamu notikumu, piemēram, OnClick, kas prasa, lai lietotājs noklikšķinātu uz attēla, lai aktivizētu attēla apmaiņas darbību.

11. Lietojiet papildu darbības.

Lai lietotu funkciju Apmainīt attēlu citiem lapas attēliem, atkārtojiet 5.–10. darbību, noklikšķinot, lai atlasītu attēlu, kuru vēlaties izmantot kā aktivizētāju, un pēc tam norādot atbilstošo attēlu, kas ir jānomaina.

12Pārbaudiet savu darbu pārlūkprogrammā.

Šādas rīcības sekas var redzēt tikai tad, kad programmā Dreamweaver darbvietas augšējā kreisajā stūrī noklikšķiniet uz pogas Tiešais skats vai priekšskatāt savu lapu tīmekļa pārlūkprogrammā.