Kuinka luoda vaihtoja useilla kuvilla Dreamweaverissa

Ennen kuin aloitat monimutkaisemman sivusuunnittelun luomisen Dreamweaverin Swap Image -toiminnolla, katso valmis sivu. Vaihda kuva -toiminnolla voit korvata minkä tahansa tai kaikki sivulla olevat kuvat.

Kun käytät Vaihda kuva -toimintoa, on tärkeää, että kaikki vaihdettavat kuvat ovat samankokoisia (korkeus ja leveys). Jos kuvat eivät ole samankokoisia, kaikki kuvat ensimmäistä lukuun ottamatta venytetään tai pakataan niin, että ne sopivat ensimmäisen sivulle lisätyn kuvan viemään tilaan.

Jos käytät Vaihda kuva -toimintoa kuvien kanssa, jotka eivät kaikki ole saman korkeita ja leveitä, sinulla on muutama vaihtoehto:

Rajaa suuremmat kuvat niin, että kaikki kuvat ovat samankokoisia.

Varmista, että vaaka- ja pystykuvat vievät saman tilan suunnittelussasi yhdistämällä kaksi pystysuuntaista kuvaa jokaista vaakasuuntaista kuvaa kohden. Luo vain tiedosto ohjelmassa, kuten Photoshopissa, lisää kaksi pystysuuntaista kuvaa samaan tiedostoon vierekkäin ja kokoa sitten kuva niin, että tiedosto on samankokoinen kuin yksi vaakasuuntainen kuva.

Luo yksi suurimman kuvasi kokoinen kuvatiedosto, aseta tausta neutraaliksi väriksi, kuten musta tai valkoinen, ja lisää sitten kaikki muut kuvat taustalle, jotta voit tallentaa ne kaikki samalla tiedostokoolla.

Noudata näitä ohjeita käyttääksesi Vaihda kuva -toimintoa:

1Luo sivusuunnittelu, jossa on kaikki kuvat, jotka haluat näkyvän aluksi.

Jokaisesta Lontoon Tower Bridgen sivusuunnittelun kolmesta valokuvasta on kaksi kopiota: yksi pikkukuva ja yksi suurempi versio. Kun sivu latautuu ensimmäisen kerran verkkoselaimessa, kaikki kolme pikkukuvaa sijoitetaan sivun alaosaan, ja ensimmäinen vastaavista suuremmista versioista näkyy pääalueella juuri pikkukuvien yläpuolella.

2 Nimeä kuvasi Kiinteistötarkastajassa.

Jos haluat kohdistaa kuvat JavaScriptillä, mikä toimii näin, anna jokaiselle kuvalle ensin yksilöllinen tunnus. Kuvatunnus ei ole sama kuin kuvatiedoston nimi tai tekstitunniste, vaikka voit käyttää samoja tai samankaltaisia ​​nimiä. Kuvatunnuksissa ei saa olla välilyöntejä tai erikoismerkkejä.

3Valitse Ikkuna → Käyttäytyminen.

Käyttäytyminen-paneeli avautuu. Voit vetää Käyttäytyminen-paneelin muualle sivulla ja laajentaa sitä vetämällä sen alaosaa tai sivua. Voit myös sulkea muut avoimet paneelit saadaksesi lisää tilaa napsauttamalla tummanharmaata palkkia minkä tahansa paneelin yläosassa.

4Valitse kuva.

Valitse sivulta kuva, joka toimii toiminnon käynnistäjänä.

5Valitse Vaihda kuva -toiminto.

Kun laukaisukuva on valittuna työtilassa, napsauta Plus-merkkiä Käyttäytyminen-paneelissa avataksesi toimintojen avattavan luettelon ja valitse toiminto, jota haluat käyttää.

6Määritä vaihdettavat kuvat Vaihda kuva -valintaikkunassa.

Valitse Kuvat-luettelosta korvattavan kuvan tunnus. Napsauta Selaa-painiketta valitaksesi kuva, joka korvaa pääkuvan. Jos kuvaa ei ole vielä tallennettu paikallisen sivuston kansioon, Dreamweaver tarjoaa kopioivan sen sinne puolestasi.

7Valitse Vaihda kuva -valintaikkunan alareunasta Esilataa kuvat -vaihtoehto, jos haluat ohjeistaa selaimen lataamaan kaikki kuvat välimuistiin, kun sivu ladataan.

Jos et valitse tätä vaihtoehtoa, kuvan vaihtoa käytettäessä saattaa esiintyä viivettä.

8Jos haluat, poista Palauta kuvat OnMouseOut -vaihtoehdon valinta.

Palauta kuvat OnMouseOut -vaihtoehto tarkoittaa, että kun tapahtuma on valmis (kuten kun hiiri siirretään pois käynnistävästä pikkukuvasta), alkuperäinen kuva korvataan. Oletusarvoisesti Dreamweaver valitsee tämän vaihtoehdon Vaihda kuva -toiminnalle. Haluat ehkä poistaa tämän vaihtoehdon valinnan, jos huomaat, että alkuperäisen kuvan vaihtaminen joka kerta, kun siirrät kohdistimen toisen pikkukuvan päälle, häiritsee.

9Kun olet määrittänyt kaikki toiminnan asetukset, napsauta OK.

Uusi toimintatapa näkyy Käyttäytyminen-paneelissa.

10Määritä käytökselle tapahtuma.

Kun toiminto on otettu käyttöön, voit palata ja määrittää, mikä tapahtuma käynnistää toiminnon. Oletusarvoisesti Dreamweaver käyttää OnMouseOver-tapahtumaa, kun käytät Vaihda kuva -toimintoa, mutta voit muuttaa tapahtuman mihin tahansa käytettävissä olevaan tapahtumaan, kuten OnClick, joka edellyttää, että käyttäjä napsauttaa kuvaa käynnistääkseen Vaihda kuva -toiminnon.

11 Käytä lisäkäyttäytymistä.

Jos haluat käyttää Vaihda kuva -toimintoa sivun muihin kuviin, toista vaiheet 5–10, napsauta valitaksesi kuva, jota haluat käyttää laukaisimena, ja määritä sitten vastaava kuva, joka tulee vaihtaa.

12Testaa työsi selaimessa.

Et näe tämän kaltaisen toiminnan vaikutuksia, ennen kuin napsautat Dreamweaverin työtilan vasemmassa yläkulmassa olevaa Live view -painiketta tai esikatselet sivuasi verkkoselaimessa.