
Τι πρέπει να γνωρίζετε
• Χρησιμοποιήστε μια εικόνα κανονικού μεγέθους που το πρόγραμμα περιήγησης δεν θα επαναπωλήσει. Θα χρειαστείτε επίσης έναν επεξεργαστή εικόνας και έναν επεξεργαστή HTML ή κειμένου. • Κατά την εισαγωγή της εικόνας, προσθέστε ένα επιπλέον χαρακτηριστικό για να προσδιορίσετε τις συντεταγμένες του χάρτη. • Για παράδειγμα: Αυτό το άρθρο εξηγεί πώς να δημιουργείτε χάρτες εικόνας χρησιμοποιώντας ετικέτες HTML αντί για πρόγραμμα επεξεργασίας χάρτη εικόνων. Οι περισσότεροι επεξεργαστές εικόνων θα σας δείξουν τις συντεταγμένες του ποντικιού σας όταν δείχνετε την εικόνα, που είναι όλα τα δεδομένα που χρειάζεστε για να ξεκινήσετε με χάρτες εικόνων.
Δημιουργία χάρτη εικόνας
Για να δημιουργήσετε έναν χάρτη εικόνας, επιλέξτε πρώτα μια εικόνα που θα χρησιμεύσει ως βάση του χάρτη. Η εικόνα πρέπει να έχει «κανονικό μέγεθος» – δηλαδή, δεν πρέπει να χρησιμοποιείτε μια εικόνα τόσο μεγάλη ώστε το πρόγραμμα περιήγησης να την κλιμακώσει. Όταν εισαγάγετε την εικόνα, θα προσθέσετε ένα επιπλέον χαρακτηριστικό που προσδιορίζει τις συντεταγμένες του χάρτη:
class = «ql-syntax»> Όταν δημιουργείτε έναν χάρτη εικόνας, δημιουργείτε μια περιοχή με δυνατότητα κλικ στην εικόνα, οπότε οι συντεταγμένες του χάρτη πρέπει να ευθυγραμμιστούν με το ύψος και το πλάτος της εικόνας που επιλέξατε. Οι χάρτες υποστηρίζουν τρεις διαφορετικούς τύπους σχημάτων:
- ορθογώνιο – ένα ορθογώνιο ή τετράπλευρο σχήμα
- πολυ — πολύγωνο ή πολύπλευρη μορφή
- κύκλος — ένας κύκλος
Για να δημιουργήσετε τις περιοχές, πρέπει να απομονώσετε τις συγκεκριμένες συντεταγμένες που σκοπεύετε να χαρτογραφήσετε. Ένας χάρτης μπορεί να αποτελείται από μία ή περισσότερες καθορισμένες περιοχές στην εικόνα που, όταν κάνουν κλικ, ανοίγουν έναν νέο υπερσύνδεσμο. Για ένα ορθογώνιο παραλληλόγραμμο, χαρτογραφείτε ακριβώς την επάνω αριστερή και την κάτω δεξιά γωνία. Όλες οι συντεταγμένες αναφέρονται ως x, y (πάνω, πάνω). Έτσι, για την επάνω αριστερή γωνία 0,0 και την κάτω δεξιά γωνία 10,15 θα πληκτρολογήσετε 0,0,10,15. Στη συνέχεια το συμπεριλαμβάνετε στο χάρτη:
class = «ql-σύνταξη»>
Για ένα πολύγωνο, χαρτογραφείτε το καθένα x, ε συντονίστε ξεχωριστά. Το πρόγραμμα περιήγησης Web συνδέει αυτόματα το τελευταίο σύνολο συντεταγμένων με το πρώτο. οτιδήποτε μέσα σε αυτές τις συντεταγμένες είναι μέρος του χάρτη. <όνομα χάρτη = "βρεφικές γάτες">
class = «ql-σύνταξη»>
Κύκλος Τα σχήματα απαιτούν μόνο δύο συντεταγμένες, όπως το ορθογώνιο, αλλά για τη δεύτερη συντεταγμένη, καθορίζετε την ακτίνα ή την απόσταση από το κέντρο του κύκλου. Έτσι, για έναν κύκλο με το κέντρο στα 122.122 και μια ακτίνα 5 θα γράψατε 122.122.5:
class = «ql-σύνταξη»>
Όλες οι περιοχές και τα σχήματα ενδέχεται να περιλαμβάνονται στην ίδια ετικέτα χάρτη:
class = «ql-σύνταξη»>
Σκέψεις
Οι χάρτες εικόνας ήταν πολύ πιο συνηθισμένοι στην εποχή του Web 1.0 της δεκαετίας του 1990 έως τις αρχές της δεκαετίας του 2000 – οι χάρτες εικόνων αποτελούσαν συχνά τη βάση της πλοήγησης ενός ιστότοπου. Ένας σχεδιαστής θα δημιουργούσε ένα είδος εικόνας για να υποδείξει στοιχεία μενού και έπειτα έβαζε έναν χάρτη. Οι σύγχρονες προσεγγίσεις ενθαρρύνουν την απόκριση του σχεδιασμού και χρησιμοποιούν διαδοχικά φύλλα στυλ για τον έλεγχο της τοποθέτησης εικόνων και υπερσυνδέσμων σε μια σελίδα. Παρόλο που η ετικέτα χάρτη εξακολουθεί να υποστηρίζεται στο πρότυπο HTML, η χρήση κινητών συσκευών με μικρούς παράγοντες μορφής μπορεί να οδηγήσει σε απροσδόκητα προβλήματα απόδοσης με τους χάρτες εικόνων. Επιπλέον, προβλήματα εύρους ζώνης ή σπασμένες εικόνες σημαίνουν την αξία ενός χάρτη εικόνας. Επομένως, μη διστάσετε να συνεχίσετε να χρησιμοποιείτε αυτήν τη σταθερή, καλά κατανοητή τεχνολογία – γνωρίζοντας ότι υπάρχουν πιο αποτελεσματικές εναλλακτικές λύσεις en μόδα με σχεδιαστές Ιστού.