CSS Image Rollover Effect

ανατροπές εικόνας είναι χρήσιμα εργαλεία στην προσπάθεια τους τελικούς χρήστες σας να παρακολουθείτε το ποντίκι τους σε όλη την ιστοσελίδα σας . Μια ιστοσελίδα σχεδιαστής θα συσκευάσουν συχνά πολύ λεπτομερείς πληροφορίες σε μια σελίδα , και ο τελικός χρήστης θα χρειαστεί μια οπτική ουρά που ποντίκι της έχει μεταφερθεί something.There είναι δύο βασικοί τρόποι για να δημιουργήσετε ένα ανατροπής . Μπορείτε να χρησιμοποιήσετε το scripting γλώσσα πλευρά του πελάτη που ονομάζεται JavaScript για να ολοκληρώσει το έργο , ή μπορείτε να χρησιμοποιήσετε Cascading Style Sheets ( CSS ) για να ολοκληρώσει το έργο . Το άρθρο αυτό καλύπτει τη μέθοδο Cascading Style Sheets . Δημιουργία του κειμένου Rollover
Η

Δημιουργήστε ένα γενικό έγγραφο XHTML στον κειμενογράφο σας , όπως φαίνεται στην εικόνα .

* Συμπεριλάβετε το DOCTYPE Μεταβατικές και ετικέτες κωδικοποίησης σας . * Συμπεριλάβετε τις ετικέτες τίτλου μεταξύ . οι ετικέτες κεφάλι * Συμπεριλάβετε τις ετικέτες στυλ ανάμεσα στις ετικέτες κεφάλι

μεταξύ των ετικετών του σώματος , πληκτρολογήστε τις ακόλουθες λέξεις : .

Αυτό είναι ένα ανατροπής κείμενο

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

class = " rollover "

Ανεβάστε το έγγραφό σας στο διακομιστή Web σας
εικόνων Δημιουργία των κανόνων στυλ
<. br >

Πληκτρολογήστε την ακόλουθη ανάμεσα στις ετικέτες στυλ στην κορυφή του εγγράφου σας :

span.rollover { υπόβαθρο-χρώμα : λευκό? } ζωής: hover.rollover { υπόβαθρο-χρώμα : κίτρινο? χρώμα : καφέ ? }

Πρώτον , να δημιουργήσει τη διάρκεια ανατροπής οδηγίες για το φύλλο στυλ . Πληκτρολογήστε " άνοιγμα ", τότε μια περίοδος , στη συνέχεια, « ανατροπής », όπου ανατροπής ταιριάζει με το χαρακτηριστικό τάξη που δόθηκε στην ετικέτα διάστημα . Αυτό δηλώνει ότι το φόντο ανάμεσα στις ετικέτες άνοιγμα είναι λευκό , το οποίο μοιάζει με ένα κενό χρώμα φόντου για τον τελικό χρήστη .

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

Η δημιουργία ενός
Rollover Button

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

υπόβαθρο-χρώμα : ναυτικό ? Σύνορα : 5px λευκό αρχή ? Font-family : Georgia ? Font-size : 14pt ? Χρώμα : λευκό?

Πρώτον , να αλλάξετε το χρώμα του φόντου από το λευκό στο ναυτικό . Στη συνέχεια , προσθέστε το περίγραμμα χρήσης, το οποίο αποτελείται από τρία μέρη : το περίγραμμα πλάτους , τα σύνορα , το χρώμα και τα χαρακτηριστικά των συνόρων - style . Έχουμε επιλέξει ένα 5 - pixel , λευκό , εκ προοιμίου σύνορα , πράγμα που σημαίνει ότι υπάρχει ένα λευκό , ορθογώνιο κουτί που συνορεύουν με το περιεχόμενο της ετικέτας ανοίγματος που είναι 5 pixels πάχους .

Αλλάξτε την οικογένεια γραμματοσειράς στη Γεωργία στις 14 pt . Τέλος , να αλλάξετε το χρώμα της γραμματοσειράς σε λευκό χρώμα, έτσι ώστε να εμφανίζεται στο πλαίσιο ναυτικού . Ανεβάστε το έγγραφο στο διακομιστή Web σας και δοκιμάστε το .
Εικόνων Πριν από το Rollover
Η

Αυτό είναι ένα στιγμιότυπο της ιστοσελίδας , πριν να τοποθετήσετε το δείκτη του ποντικιού σας πάνω από το κείμενο . Το κείμενο είναι λευκό και το φόντο είναι σκούρο μπλε .
Εικόνων Μετά το Rollover
Η

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