Πώς να δημιουργήσετε ανταλλαγές με πολλές εικόνες στο Dreamweaver

Πριν ξεκινήσετε να δημιουργείτε ένα πιο περίπλοκο σχέδιο σελίδας με τη συμπεριφορά Swap Image του Dreamweaver, κοιτάξτε μια ολοκληρωμένη σελίδα. Με τη συμπεριφορά Εναλλαγή εικόνας, μπορείτε να αντικαταστήσετε όλες ή όλες τις εικόνες σε μια σελίδα.

Όταν χρησιμοποιείτε τη συμπεριφορά Swap Image, είναι σημαντικό να κάνετε όλες τις εικόνες που θα αλλάξετε το ίδιο μέγεθος (ύψος και πλάτος). Εάν οι εικόνες δεν έχουν το ίδιο μέγεθος, όλες οι εικόνες εκτός από την πρώτη θα τεντωθούν ή θα συμπιεστούν για να χωρέσουν στον χώρο που καταλαμβάνει η πρώτη εικόνα που έχει εισαχθεί στη σελίδα.

Εάν χρησιμοποιείτε τη συμπεριφορά Εναλλαγή εικόνας με μια σειρά εικόνων που δεν έχουν όλες το ίδιο ύψος και πλάτος, έχετε μερικές επιλογές:

Κόψτε τις μεγαλύτερες έτσι ώστε όλες οι εικόνες να έχουν το ίδιο μέγεθος.

Κάντε τις οριζόντιες και κάθετες εικόνες να καταλαμβάνουν τον ίδιο χώρο στο σχέδιό σας συνδυάζοντας δύο κάθετες εικόνες για κάθε οριζόντια. Απλώς δημιουργήστε ένα αρχείο σε ένα πρόγραμμα όπως το Photoshop, εισαγάγετε δύο κάθετες εικόνες στο ίδιο αρχείο δίπλα-δίπλα και, στη συνέχεια, μεγεθύνετε αυτήν την εικόνα έτσι ώστε το αρχείο να έχει το ίδιο μέγεθος με μία οριζόντια εικόνα.

Δημιουργήστε ένα αρχείο εικόνας στο μέγεθος της μεγαλύτερης εικόνας σας, ορίστε το φόντο σε ουδέτερο χρώμα, όπως μαύρο ή άσπρο και, στη συνέχεια, εισαγάγετε όλες τις άλλες εικόνες στο φόντο, ώστε να μπορείτε να τις αποθηκεύσετε όλες με το ίδιο μέγεθος αρχείου.

Ακολουθήστε αυτά τα βήματα για να χρησιμοποιήσετε τη συμπεριφορά Swap Image:

1Δημιουργήστε ένα σχέδιο σελίδας με όλες τις εικόνες που θέλετε να εμφανίζονται αρχικά.

Κάθε μία από τις τρεις φωτογραφίες στο σχέδιο της σελίδας για τη Γέφυρα του Πύργου στο Λονδίνο έχει δύο αντίγραφα: μία μικρογραφία και μία μεγαλύτερη έκδοση. Όταν η σελίδα φορτώνεται για πρώτη φορά σε ένα πρόγραμμα περιήγησης ιστού, και οι τρεις εικόνες μικρογραφιών τοποθετούνται στο κάτω μέρος της σελίδας, με την πρώτη από τις αντίστοιχες μεγαλύτερες εκδόσεις να εμφανίζεται στην κύρια περιοχή ακριβώς πάνω από τις μικρογραφίες.

2Ονομάστε τις εικόνες σας στο Property inspector.

Για να στοχεύσετε τις εικόνες σας με JavaScript, όπως λειτουργούν οι συμπεριφορές, δώστε πρώτα σε κάθε εικόνα ένα μοναδικό αναγνωριστικό. Το αναγνωριστικό εικόνας δεν είναι το ίδιο με το όνομα αρχείου εικόνας ή την ετικέτα κειμένου, αν και μπορείτε να χρησιμοποιήσετε τα ίδια ή παρόμοια ονόματα. Τα αναγνωριστικά εικόνων δεν πρέπει να έχουν κενά ή ειδικούς χαρακτήρες.

3 Επιλέξτε Παράθυρο→ Συμπεριφορές.

Ανοίγει ο πίνακας συμπεριφορών. Μπορείτε να σύρετε το πλαίσιο Συμπεριφορές αλλού στη σελίδα και μπορείτε να το επεκτείνετε σύροντας το κάτω μέρος ή το πλάι του. Μπορεί επίσης να θέλετε να κλείσετε τυχόν άλλα ανοιχτά πλαίσια για να δημιουργήσετε περισσότερο χώρο κάνοντας κλικ στη σκούρα γκρι γραμμή στο επάνω μέρος οποιουδήποτε πίνακα.

4 Επιλέξτε μια εικόνα.

Επιλέξτε την εικόνα στη σελίδα που θα χρησιμεύσει ως έναυσμα για την ενέργεια.

5 Επιλέξτε τη συμπεριφορά Swap Image.

Με την εικόνα ενεργοποίησης επιλεγμένη στον χώρο εργασίας, κάντε κλικ στο σύμβολο συν στον πίνακα Συμπεριφορές για να ανοίξετε την αναπτυσσόμενη λίστα ενεργειών και επιλέξτε την ενέργεια που θέλετε να εφαρμόσετε.

6 Καθορίστε τις εικόνες προς εναλλαγή στο πλαίσιο διαλόγου Εναλλαγή εικόνας.

Στη λίστα Εικόνες, επιλέξτε το αναγνωριστικό για την εικόνα που θα αντικατασταθεί. Κάντε κλικ στο κουμπί Αναζήτηση για να επιλέξετε την εικόνα που αντικαθιστά την κύρια εικόνα. Εάν η εικόνα δεν είναι ήδη αποθηκευμένη στον τοπικό φάκελο της τοποθεσίας, το Dreamweaver θα σας προτείνει να την αντιγράψει εκεί.

7 Στο κάτω μέρος του πλαισίου διαλόγου Εναλλαγή εικόνας, επιλέξτε την επιλογή Προφόρτωση εικόνων για να υποδείξετε στο πρόγραμμα περιήγησης να φορτώσει όλες τις εικόνες στη μνήμη cache κατά τη φόρτωση της σελίδας.

Εάν δεν κάνετε αυτήν την επιλογή, ενδέχεται να προκύψει καθυστέρηση όταν χρησιμοποιείται η εναλλαγή εικόνας.

8Αν θέλετε, καταργήστε την επιλογή Restore Images OnMouseOut.

Η επιλογή Restore Images OnMouseOut σημαίνει ότι όταν ολοκληρώνεται ένα συμβάν (όπως όταν το ποντίκι μετακινείται από τη μικρογραφία ενεργοποίησης), η αρχική εικόνα αντικαθίσταται. Από προεπιλογή, το Dreamweaver προεπιλέγει αυτήν την επιλογή για τη συμπεριφορά Swap Image. Μπορεί να θέλετε να αποεπιλέξετε αυτήν την επιλογή εάν διαπιστώσετε ότι η αντικατάσταση της αρχικής εικόνας κάθε φορά που περνάτε τον κέρσορα πάνω από μια άλλη μικρογραφία αποσπά την προσοχή.

9 Αφού καθορίσετε όλες τις ρυθμίσεις για τη συμπεριφορά, κάντε κλικ στο OK.

Η νέα συμπεριφορά εμφανίζεται στον πίνακα Συμπεριφορές.

10 Καθορίστε ένα συμβάν για τη συμπεριφορά.

Αφού εφαρμοστεί η ενέργεια, μπορείτε να επιστρέψετε και να καθορίσετε ποιο συμβάν θα ενεργοποιήσει την ενέργεια. Από προεπιλογή, το Dreamweaver εφαρμόζει το συμβάν OnMouseOver όταν χρησιμοποιείτε την ενέργεια Swap Image, αλλά μπορείτε να αλλάξετε αυτό το συμβάν σε οποιοδήποτε διαθέσιμο, όπως το OnClick, το οποίο απαιτεί από τον χρήστη να κάνει κλικ στην εικόνα για να ενεργοποιηθεί η ενέργεια Swap Image.

11 Εφαρμόστε πρόσθετες συμπεριφορές.

Για να εφαρμόσετε τη συμπεριφορά Swap Image σε άλλες εικόνες σε μια σελίδα, επαναλάβετε τα βήματα 5–10, κάνοντας κλικ για να επιλέξετε την εικόνα που θέλετε να χρησιμεύσει ως έναυσμα και, στη συνέχεια, καθορίστε την αντίστοιχη εικόνα που πρέπει να αντικατασταθεί.

12Δοκιμάστε την εργασία σας σε ένα πρόγραμμα περιήγησης.

Δεν μπορείτε να δείτε τα αποτελέσματα συμπεριφορών όπως αυτή μέχρι να κάνετε κλικ στο κουμπί Ζωντανή προβολή στην επάνω αριστερή γωνία του χώρου εργασίας στο Dreamweaver ή να κάνετε προεπισκόπηση της σελίδας σας σε ένα πρόγραμμα περιήγησης ιστού.