Μια εικόνα rollover είναι μια εικόνα που αλλάζει σε κάποια άλλη εικόνα όταν εσείς ή ο πελάτης σας μετακινεί το ποντίκι πάνω του. Αυτά χρησιμοποιούνται συνήθως για να δημιουργήσουν μια διαδραστική αίσθηση, όπως κουμπιά ή καρτέλες. Αλλά μπορείτε να δημιουργήσετε εικόνες ανατροπής από σχεδόν τίποτα.
Αυτό το σεμινάριο έχει σχεδιαστεί για να σας βοηθήσει να δημιουργήσετε μια εικόνα rollover στο Dreamweaver . Προορίζεται για χρήση από άτομα που χρησιμοποιούν τις ακόλουθες εκδόσεις του Dreamweaver:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Απαιτήσεις για αυτό το Tutorial
- Dreamweaver
Μια από τις εκδόσεις που αναφέρονται παραπάνω. - Μια πρωτότυπη εικόνα
Βεβαιωθείτε ότι έχετε βελτιστοποιήσει αυτήν την εικόνα. Αυτό θα βοηθήσει τις σελίδες σας να φορτωθούν πιο γρήγορα. - Η εικόνα ανατροπής
Αυτή η εικόνα πρέπει να έχει τις ίδιες διαστάσεις με την αρχική εικόνα. Και, όπως και η αρχική εικόνα, θα πρέπει να βελτιστοποιηθεί για να βοηθήσει τους χρόνους φόρτωσης σελίδας. - Μια ιστοσελίδα
Αυτή είναι η σελίδα HTML, στην οποία θα τοποθετήσετε την εικόνα ανατροπής σας.
01 του 06
Ξεκίνα
- Ξεκινήστε το Dreamweaver
- Ανοίξτε την ιστοσελίδα όπου θέλετε να μεταφερθείτε
02 του 06
Εισαγάγετε ένα Αντικείμενο εικόνας εικόνας αναδίπλωσης
Το Dreamweaver διευκολύνει τη δημιουργία μιας εικόνας ανατροπής.
- Μεταβείτε στο μενού Εισαγωγή και κάτω στο υπομενού "Image Objects".
- Επιλέξτε "Μετατροπή εικόνας" ή "Μετακίνηση εικόνας"
Ορισμένες παλαιότερες εκδόσεις του Dreamweaver καλούν αντ 'αυτού τα αντικείμενα εικόνας "διαδραστικές εικόνες".
03 του 06
Πείτε στο Dreamweaver ποιες εικόνες να χρησιμοποιήσετε
Το Dreamweaver εμφανίζει ένα παράθυρο διαλόγου με τα πεδία που πρέπει να συμπληρώσετε για να δημιουργήσετε την εικόνα ανατροπής.
Όνομα εικόνας
Επιλέξτε ένα όνομα εικόνας που είναι μοναδικό για τη σελίδα. Θα πρέπει να είναι μια μόνο λέξη, αλλά μπορείτε να χρησιμοποιήσετε αριθμούς, υπογράμμιση (_) και παύλες (-). Αυτό θα χρησιμοποιηθεί για τον προσδιορισμό της εικόνας που θα αλλάξει.
Αρχική εικόνα
Αυτή είναι η διεύθυνση URL ή η τοποθεσία της εικόνας που θα ξεκινήσει στη σελίδα. Μπορείτε να χρησιμοποιήσετε σχετικές ή απόλυτες διευθύνσεις URL σε αυτό το πεδίο. Αυτή θα πρέπει να είναι μια εικόνα που υπάρχει στον διακομιστή ιστού σας ή που θα φορτώσετε με τη σελίδα.
Μεταπήδηση εικόνας
Αυτή είναι η εικόνα που θα εμφανιστεί όταν το ποντίκι πάνω από την εικόνα. Ακριβώς όπως και η αρχική εικόνα, αυτό μπορεί να είναι μια απόλυτη ή σχετική διαδρομή προς την εικόνα και πρέπει να υπάρχει ή να μεταφορτώνεται όταν ανεβάζετε τη σελίδα.
Προφόρτωση εικόνας ανατροπής
Αυτή η επιλογή έχει επιλεγεί από προεπιλογή επειδή βοηθάει την εμφάνιση ανατροπής πιο γρήγορα. Επιλέγοντας την προφόρτωση της εικόνας ανατροπής, το πρόγραμμα περιήγησης στο Web θα το αποθηκεύσει σε μια προσωρινή μνήμη μέχρι το ποντίκι να κυλήσει επάνω του.
Εναλλακτικό κείμενο
Το καλό εναλλακτικό κείμενο κάνει τις εικόνες σας πιο προσιτές. Θα πρέπει πάντα να χρησιμοποιείτε κάποιο είδος εναλλακτικού κειμένου κατά την προσθήκη οποιωνδήποτε εικόνων.
Όταν κάνετε κλικ, πηγαίνετε στο URL
Οι περισσότεροι άνθρωποι θα κάνουν κλικ σε μια εικόνα όταν βλέπουν ένα σε μια σελίδα. Έτσι θα πρέπει να έχετε τη συνήθεια να τους κάνετε clickable. Αυτή η επιλογή σάς δίνει τη δυνατότητα να καθορίσετε τη σελίδα ή τη διεύθυνση URL, για να μεταβείτε στον θεατή όταν κάνουν κλικ στην εικόνα. Ωστόσο, αυτή η επιλογή δεν απαιτείται για να δημιουργηθεί μια ανατροπή.
Όταν ολοκληρώσετε όλα τα πεδία, κάντε κλικ στο κουμπί OK για να δημιουργήσετε Dreamweaver την εικόνα ανατροπής.
Η επόμενη σελίδα εμφανίζει τη δέσμη ενεργειών που γράφει το Dreamweaver.
04 του 06
Το Dreamweaver γράφει το JavaScript για εσάς
Εάν ανοίξετε τη σελίδα σε προβολή κώδικα, θα δείτε ότι το Dreamweaver εισάγει ένα μπλοκ JavaScript στο
του εγγράφου HTML. Αυτό το μπλοκ περιλαμβάνει τις 3 λειτουργίες που χρειάζεστε για να αλλάξετε τις εικόνες όταν το ποντίκι κυλάει πάνω τους και τη λειτουργία προφόρτισης εάν το επιλέξατε.λειτουργία MM_swapImgRestore ()
λειτουργία MM_findObj (n, d)
λειτουργία MM_swapImage ()
λειτουργία MM_preloadImages ()
05 του 06
Το Dreamweaver προσθέτει το HTML για τη μετακίνηση
Αν επιλέξετε να έχετε προφορτίσει το Dreamweaver τις εικόνες ανατροπής, τότε θα δείτε τον κώδικα HTML στο σώμα του εγγράφου σας για να καλέσετε το σενάριο προφόρτωσης έτσι ώστε οι εικόνες σας να φορτωθούν πιο γρήγορα.
onload = "MM_preloadImages ('shasta2.jpg')"
Το Dreamweaver προσθέτει επίσης όλο τον κώδικα για την εικόνα σας και το συνδέει (εάν συμπεριλάβετε μια διεύθυνση URL). Το τμήμα ανατροπής προστίθεται στην ετικέτα αγκύρωσης ως χαρακτηριστικά onmouseover και onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)
06 του 06
Ελέγξτε την ανατροπή
Δείτε την πλήρως λειτουργική εικόνα ανατροπής και μάθετε τι είναι στο μυαλό του Shasta.