Mouseover εφέ σε πίνακες
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 θα είναι το χρώμα που θα αλλάζει το φόντο του πίνακα κατά την διέλευση του ποντικιού, το οποίο στο παράδειγμα μας είναι ένα σκούρο γκρι.td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
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 στην στήλη του πίνακα σας όταν το ποντίκι είναι εκτός της.
Παράδειγμα
| MENU 1 | MENU 2 | MENU 3 |
Ο/Η Seldimi την είπε:
Η υλοποίηση της αλλαγής χρώματος μπορεί να γίνει και χωρίς την χρήση της javascript. Στο παρόν βοήθημα όμως δειγματίζεται ο τρόπος συνεργασίας τους
Η υλοποίηση της αλλαγής χρώματος μπορεί να γίνει και χωρίς την χρήση της javascript. Στο παρόν βοήθημα όμως δειγματίζεται ο τρόπος συνεργασίας τους
