WebDev Zone.GR
Mouseover εφέ σε πίνακες
Στο βοήθημα αυτό θα δημιουργήσουμε ένα οπτικό εφέ σε πίνακες στους οποίους όταν το ποντίκι περάσει από πάνω από τα κελιά τους, θα αλλάξουν χρώμα. Η υλοποίηση του είναι απλή με λίγη javascript & CSS και μπορεί να χρησιμοποιηθεί ως μενού.
1. Πρώτα δημιουργήστε ένα μενού στην σελίδα σας. Μετά επιλέξτε δύο χρώματα που θα χρησιμοποιήσετε, ένα για την κατάσταση MouseOver και ένα για την αρχική κατάσταση. Για το παράδειγμα χρησιμοποήσαμε:
a. Mouse over: #999999
b. Αρχικό: #CCCCCC
2. Τώρα αντιγράψτε το παρακάτω κώδικα μεταξύ των <head></head> tags.
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
Αλλάξτε το χρωματισμένο με μπλε κείμενο με το χρώμα τις επιλογή σας.
td.off θα είναι το αρχικό χρώμα, το οποίο στο παράδειγμά μας είναι ένα ανοικτό γκρι.
td.on θα είναι το χρώμα που θα αλλάζει το φόντο του πίνακα κατά την διέλευση του ποντικιού, το οποίο στο παράδειγμα μας είναι ένα σκούρο γκρι.
3. Τώρα πρέπει να εφαρμόσετε το CSS στον πίνακα που δημιουργήσατε. Εισάγεται το παρακάτω κώδικα σε κάθε <td> tag του πίνακα σας.
class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"
Έτσι ο κώδικας σας θα πρέπει να μοιάζει κάπως έτσι:
<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'">MENU 1</td>
Για να εξηγήσουμε το κώδικα κομμάτι κομμάτι:
1: <td class="off" - Προσδιορίζει την off class του CSS στην στήλη του πίνακα σας, που σημαίνει ότι αρχικά η στήλη θα έχει background χρώμα θα είναι το #CCCCCC .
2: onmouseover="this.className='on'" - Προσδιορίζει την on class του CSS στην στήλη του πίνακα σας όταν διέρχεται το ποντίκι από πάνω.
3: onmouseout="this.className='off'"> - Προσδιορίζει την off class του CSS στην στήλη του πίνακα σας όταν το ποντίκι είναι εκτός της.
Παράδειγμα
Εκτυπώθηκε από: http://www.webdevzone.gr
Κατηγορία: CSS
Ημερομηνία: Τρίτη, 25 Μαΐου 2010
Συγγραφέας: Seldimi