Χαρτογράφηση εικόνας με CSS

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

Για να δείτε το demo εικόνα χαρτογράφηση σε δράση κλικ εδώ

Γιατί να χρησιμοποιήσετε ένα χάρτη της εικόνας;

Εξετάστε το παρακάτω εικόνα. Σημειώστε ότι είναι στην πραγματικότητα 2 εικόνες που έχουν τοποθετηθεί στο ίδιο αρχείο. Αυτό μπορεί να επιτευχθεί με τη χρήση πιο καλό λογισμικό απεικόνισης όπως Photoshop.

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

Κατά τη χρήση εικόνων ανατροπής, θα χρειαστεί να κατεβάσετε περισσότερα από μόλις 1 εικόνα, θα πρέπει επίσης να εμφανιστεί αυτό όταν αλλάζει η κατάσταση εικόνας, πράγμα που σημαίνει ότι ο browser σας θα πρέπει να καταστεί η δεύτερη λήψη εικόνας, έτσι η μετακύλιση δεν θα είναι ομαλή με την πρώτη φορά που εμφανίζεται. Χρησιμοποιώντας ένα χάρτη εικόνας σταματά εντελώς αυτό το πρόβλημα, διότι, όταν η αρχική εικόνα έχει κατεβάσει τόσο είναι το δεύτερο. Δεν υπάρχει καμία καθυστέρηση, είναι τόσο απλό.

Τρόπος χρήσης ενός Image Map

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

body{
font-size: 12pt;
font-family: Arial;
}
#links {
padding:10px;
}
a.bookmark {
background: url('/images/delicious.gif') left no-repeat;
background-position: 0px -17px;
text-decoration: none;
pointer:cursor;
padding-left: 18px;
margin-left:5px;
}
a.bookmark:hover {
background: url('images/delicious.gif') left no-repeat;
background-position: 0px 1px;
text-decoration: none;
padding-left: 18px;
margin-left:5px;
pointer:cursor;
}


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

< a class = "bookmark" href = "#" >Delicious</ a >


Αυτό είναι όλα υπάρχει σε αυτό. Με μόνο ένα μικρό ποσό των CSS και ακόμη μικρότερο ποσό της HTML, μπορούμε να δημιουργήσουμε ένα πολύ γρήγορο και δυνατό τρόπο για εικόνες ανατροπής. Για να δείτε το demo στη δράση κάντε κλικ εδώ.