Λαμβάνοντας τον έλεγχο της Rollovers εικόνας

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

Για να αφαιρέσετε τα σύνορα προεπιλογή χρήση αυτού του CSS σας:


a img { border: none; }


Μπορείτε επίσης να αφαιρέσετε τα σύνορα προεπιλογή για τις εικόνες που συνδέονται με την προσθήκη "border = 0" μέσα στην ετικέτα εικόνας, αλλά αυτό είναι ένα deprecated ιδιοκτησίας και δεν συνιστάται. Δυστυχώς αυτό έχει ενταχθεί σε πολλά αντιγραφή-και-επικόλληση δείγματα κώδικα, δεδομένου ότι οι δυνάμεις το επιθυμητό αποτέλεσμα δεν έχει να υπολογίζει για τον ιδιοκτήτη της ιστοσελίδας τήρηση καλή CSS.

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

Ο καλύτερος τρόπος για να δείτε αυτά τα παραδείγματα είναι για να δείτε τη σελίδα παράδειγμα και ο καλύτερος τρόπος για να καταλάβουμε πώς λειτουργούν είναι να κατεβάσετε το παράδειγμα και να δει τον κωδικό σας.

Παράδειγμα 1: Στύλοι Συνόρων

Το παράδειγμα αυτό δίνει την εικόνα μερικά pixels του παραγέμισμα και τα σύνορα στην κανονική κατάσταση είναι και προσθέτει ένα χρώμα φόντου για ανατροπής.

Παράδειγμα 2: Dashed Στύλοι Συνόρων

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

Παράδειγμα 3: Black & White να Χρώμα

Αυτή η τεχνική προκαλεί την εικόνα σε "colorize" σε περίπτωση ανατροπής. Αυτό είναι λίγο πιο περίπλοκο στο ότι δεν θα είστε σε θέση να χρησιμοποιούν τακτικά img ετικέτες στο html. Θα χρησιμοποιήσετε τα στοιχεία άγκυρα με μοναδικά ονόματα τάξη. Αυτές οι άγκυρες θα έχουν ειδικές ύψη και πλάτη και μια εικόνα φόντου. Στη συνέχεια για ανατροπής, θα μπορούν να ανταλλάξουν την εικόνα φόντου για μια έκδοση χρώμα.

Παράδειγμα 4: Προσθήκη Gradient Ιστορικό

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

Παράδειγμα 5: Προβολή πληροφοριών

Η τεχνική αυτή καθιστά το κείμενο εμφανίζεται κάτω από την εικόνα ανατροπής. Κάνει χρήση του φόντου ιδιοκτησία εικόνας στο CSS όπως στο παράδειγμα 3, αλλά στην προκειμένη περίπτωση, την εικόνα φόντου παραμένει η ίδια. Η διαφορά είναι ότι στην κανονική κατάσταση, το κείμενο είναι ξεκίνησε την οθόνη με ένα τεράστιο αρνητικό αντισταθμιστεί η οποία αφαιρείται σε περίπτωση ανατροπής. Για να πάρετε το κείμενο να εμφανίζεται κάτω από την εικόνα, αντί της από πάνω του δώσει την άγκυρα κορυφαία επενδυτική πλήρωση του λίγο μεγαλύτερη από το ύψος της εικόνας.