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

Οι ανατροπές είναι ένα τόσο δημοφιλές χαρακτηριστικό που το Dreamweaver περιλαμβάνει ένα ειδικό πλαίσιο διαλόγου μόνο για ανατροπές: το πλαίσιο διαλόγου Εισαγωγή εικόνας ανατροπής. Οι εικόνες ανατροπής, όπως υποδηλώνει το όνομα, έχουν σχεδιαστεί για να αντιδρούν όταν κάποιος περνά έναν κέρσορα πάνω από μια εικόνα. Το αποτέλεσμα μπορεί να είναι τόσο δραματικό όσο μια εικόνα ενός σκύλου που αντικαθίσταται από μια εικόνα ενός λιονταριού ή τόσο διακριτικό όσο το χρώμα μιας λέξης αλλάζει.

Μπορείτε να δημιουργήσετε πιο σύνθετα εφέ εικόνας με ανατροπή με την επιλογή Εναλλαγή εικόνας από τον πίνακα Συμπεριφορές. Η επιλογή Swap Image σάς δίνει τη δυνατότητα να αλλάξετε πολλές εικόνες ταυτόχρονα.

Για να δημιουργήσετε ένα απλό εφέ ανατροπής με δύο εικόνες χρησιμοποιώντας το παράθυρο διαλόγου Εισαγωγή εικόνας του Dreamweaver, ακολουθήστε τα εξής βήματα:

Τοποθετήστε τον κέρσορα στη σελίδα όπου θέλετε να εμφανίζεται η ανατροπή.

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

Επιλέξτε Εισαγωγή→Εικόνα→Εικόνα ανατροπής.

Εναλλακτικά, μπορείτε να χρησιμοποιήσετε την αναπτυσσόμενη λίστα που είναι διαθέσιμη από το εικονίδιο Images στον πίνακα Common Insert και να επιλέξετε Rollover Image.

Εμφανίζεται το πλαίσιο διαλόγου Εισαγωγή εικόνας ανατροπής.

Στο πλαίσιο Όνομα εικόνας, ονομάστε την εικόνα σας.

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

Στο πλαίσιο Αρχική εικόνα, καθορίστε την πρώτη εικόνα που θέλετε να είναι ορατή. Χρησιμοποιήστε το κουμπί Αναζήτηση για να εντοπίσετε και να επιλέξετε την εικόνα.

Εάν οι εικόνες δεν βρίσκονται ήδη στον τοπικό φάκελο του ιστότοπού σας, το Dreamweaver τις αντιγράφει στον ιστότοπό σας όταν δημιουργείτε το rollover.

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

Και πάλι, μπορείτε να χρησιμοποιήσετε το κουμπί Αναζήτηση για να εντοπίσετε και να επιλέξετε την εικόνα.

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

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

Στο πεδίο Εναλλακτικό κείμενο, εισαγάγετε μια περιγραφή των εικόνων.

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

Στο πλαίσιο Όταν έγινε κλικ, Μετάβαση στη διεύθυνση URL, εισαγάγετε οποιαδήποτε διεύθυνση ιστού ή περιηγηθείτε για να εντοπίσετε μια άλλη σελίδα στον ιστότοπό σας στην οποία θέλετε να συνδεθείτε.

Εάν δεν καθορίσετε μια διεύθυνση URL, το Dreamweaver εισάγει αυτόματα το σύμβολο # ως σύμβολο κράτησης θέσης στον κώδικα.

Το σύμβολο # είναι μια κοινή τεχνική για τη δημιουργία συνδέσμων που δεν συνδέονται πουθενά. Επειδή οι εικόνες ανατροπής που δεν συνδέονται με άλλη σελίδα έχουν πολλές εξαιρετικές χρήσεις, αυτή η τεχνική είναι χρήσιμη. Απλώς να θυμάστε ότι εάν θέλετε η μετατροπή σας να συνδεθεί, πρέπει να αντικαταστήσετε το σύμβολο # με έναν σύνδεσμο προς μια άλλη σελίδα.

Κάντε κλικ στο OK.

Οι εικόνες ρυθμίζονται αυτόματα ως ανατροπή.

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

Μπορείτε να δείτε πώς λειτουργεί το rollover σας στην προβολή σχεδίασης του Dreamweaver ή χρησιμοποιώντας την επιλογή Ζωντανή προβολή. Όταν κάνετε κλικ στο κουμπί Live στην επάνω αριστερή γωνία του χώρου εργασίας, ουσιαστικά μετατρέπετε το Dreamweaver σε ένα πρόγραμμα περιήγησης ιστού που εμφανίζει σελίδες όπως το πρόγραμμα περιήγησης Chrome.

Όταν κάνετε προεπισκόπηση μιας σελίδας στον υπολογιστή σας που περιλαμβάνει μια εικόνα μετατροπής, ορισμένα προγράμματα περιήγησης ιστού θα εμφανίσουν μια προειδοποίηση που δηλώνει ότι πρέπει να επιτρέψετε στα στοιχεία ελέγχου ActiveX να προβάλουν τη σελίδα. Αυτή είναι μια προειδοποίηση ασφαλείας που εμφανίζεται μόνο όταν η σελίδα ανοίγει στον ίδιο υπολογιστή όπου είναι αποθηκευμένη η σελίδα.

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

Πίστωση: Έργο τέχνης από istockphoto.com