Δημιουργώντας μια εικόνα Rollover στο Dreamweaver CS3 - dummies

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

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

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

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

2. Επιλέξτε Insert -> Image Objects -> Image Rollover.

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

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

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

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

Αν οι εικόνες δεν βρίσκονται ήδη στον ριζικό φάκελο του site σας, το Dreamweaver θα τις αντιγράψει στον ιστότοπό σας όταν δημιουργήσετε την ανατροπή.

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

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

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

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

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

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

8. Κάντε κλικ στο κουμπί OK.

Οι εικόνες δημιουργούνται αυτόματα ως ανατροπή.

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