Hogyan hozzunk létre cseréket több képpel a Dreamweaverben

Mielőtt elkezdené egy összetettebb oldalterv létrehozását a Dreamweaver Swap Image viselkedésével, nézzen meg egy kész oldalt. A Képcsere viselkedéssel bármelyik vagy az összes képet lecserélheti az oldalon.

Amikor a Képcsere viselkedést használja, fontos, hogy az összes cserélni kívánt kép azonos méretű legyen (magasság és szélesség). Ha a képek nem azonos méretűek, az első kivételével az összes képet megnyújtja vagy tömöríti, hogy illeszkedjen az oldalba beszúrt első kép által elfoglalt helyhez.

Ha a Képcsere viselkedést nem egyforma magasságú és szélességű képsorozattal használja, akkor néhány lehetőség közül választhat:

Vágja le a nagyobbakat, hogy minden kép azonos méretű legyen.

Hagyja, hogy a vízszintes és függőleges képek ugyanazt a helyet foglalják el a tervezésben, ha mindegyik vízszinteshez két függőleges képet kombinál. Egyszerűen hozzon létre egy fájlt egy programban, például a Photoshopban, illesszen be két függőleges képet ugyanabba a fájlba egymás mellé, majd méretezze meg a képet úgy, hogy a fájl mérete megegyezzen egy vízszintes képpel.

Hozzon létre egy képfájlt a legnagyobb kép méretével, állítsa a hátteret semleges színűre, például feketére vagy fehérre, majd illessze be az összes többi képet a háttérbe, így mindet azonos fájlmérettel mentheti.

Kövesse az alábbi lépéseket a Képcsere viselkedésének használatához:

1 Hozzon létre egy oldaltervezést, amelyen az összes először megjeleníteni kívánt kép szerepel.

A londoni Tower Bridge oldaltervében szereplő három fotó mindegyike két példányban készült: egy miniatűr és egy nagyobb változat. Amikor az oldal először betöltődik egy webböngészőben, mindhárom miniatűr az oldal alján helyezkedik el, és a megfelelő nagyobb verziók közül az első megjelenik a fő területen, közvetlenül a miniatűrök felett.

2 Nevezze el képeit az ingatlanfelügyelőben.

Ahhoz, hogy a képeket JavaScript segítségével célozza meg, és így működik a viselkedés, először adjon meg minden képnek egyedi azonosítót. A képazonosító nem egyezik meg a képfájl nevével vagy a szöveges címkével, bár használhatja ugyanazokat vagy hasonló neveket. A képazonosítók nem tartalmazhatnak szóközt vagy speciális karaktereket.

3 Válassza az Ablak → Viselkedések lehetőséget.

Megnyílik a Viselkedések panel. A Viselkedések panelt máshová húzhatja az oldalon, és kibonthatja az aljának vagy oldalának húzásával. A többi nyitott panelt is bezárhatja, hogy több hely legyen, ha rákattint bármely panel tetején lévő sötétszürke sávra.

4 Válasszon ki egy képet.

Válassza ki azt a képet az oldalon, amely a művelet kiváltójaként fog szolgálni.

5 Válassza ki a Képcsere viselkedést.

A munkaterületen kiválasztva az aktiválási képet, kattintson a pluszjelre a Viselkedések panelen a műveletek legördülő listájának megnyitásához, és válassza ki az alkalmazni kívánt műveletet.

6 A Képcsere párbeszédpanelen adja meg a cserélni kívánt képeket.

A Képek listában válassza ki a lecserélni kívánt kép azonosítóját. Kattintson a Tallózás gombra a főképet helyettesítő kép kiválasztásához. Ha a kép még nincs elmentve a helyi webhely mappájába, a Dreamweaver felajánlja, hogy másolja oda.

7A Képcsere párbeszédpanel alján válassza a Képek előtöltése lehetőséget, hogy utasítsa a böngészőt, hogy az oldal betöltésekor az összes képet betöltse a gyorsítótárba.

Ha nem választja ki ezt a lehetőséget, a képcsere használatakor késés léphet fel.

8Ha szeretné, szüntesse meg a Restore Images OnMouseOut opció kijelölését.

A Képek visszaállítása OnMouseOut opció azt jelenti, hogy amikor egy esemény befejeződik (például amikor az egeret elmozdítják a kiváltó bélyegképről), az eredeti kép lecserélődik. Alapértelmezés szerint a Dreamweaver ezt a beállítást előre kiválasztja a Képcsere viselkedéséhez. Érdemes lehet törölni ezt a lehetőséget, ha úgy találja, hogy az eredeti kép cseréje minden alkalommal, amikor a kurzort egy másik indexkép fölé viszi, elvonja a figyelmet.

9Miután megadta a viselkedés összes beállítását, kattintson az OK gombra.

Az új viselkedés a Viselkedések panelen jelenik meg.

10 Adjon meg egy eseményt a viselkedéshez.

A művelet alkalmazása után visszatérhet, és megadhatja, hogy melyik esemény indítsa el a műveletet. Alapértelmezés szerint a Dreamweaver az OnMouseOver eseményt alkalmazza, amikor a Képcsere műveletet használja, de ezt az eseményt bármely elérhető eseményre módosíthatja, például az OnClick-re, amely megköveteli, hogy a felhasználó a képre kattintson a Képcsere művelet elindításához.

11. Alkalmazzon további viselkedéseket.

Ha a Képcsere viselkedést az oldalon lévő többi képre szeretné alkalmazni, ismételje meg az 5–10. lépéseket, kattintson a kioldóként szolgálni kívánt kép kiválasztásához, majd adja meg a megfelelő képet, amelyet ki kell cserélni.

12 Tesztelje a munkáját egy böngészőben.

Nem láthatja az ehhez hasonló viselkedések hatásait, amíg rá nem kattint az Élő nézet gombra a munkaterület bal felső sarkában a Dreamweaver alkalmazásban, vagy meg nem tekinti az oldal előnézetét egy webböngészőben.