Τι πρέπει να γνωρίζετε
• Χρησιμοποιήστε μια εικόνα κανονικού μεγέθους την οποία το πρόγραμμα περιήγησης δεν θα αλλάξει κλίμακα. Θα χρειαστείτε επίσης ένα πρόγραμμα επεξεργασίας εικόνας και ένα πρόγραμμα επεξεργασίας HTML ή κειμένου.
• Κατά την εισαγωγή της εικόνας, προσθέστε ένα επιπλέον χαρακτηριστικό για να προσδιορίσετε τις συντεταγμένες του χάρτη.
• Για παράδειγμα:
Αυτό το άρθρο εξηγεί πώς μπορείτε να δημιουργήσετε Χάρτες εικόνων χρησιμοποιώντας ετικέτες HTML αντί για πρόγραμμα επεξεργασίας χαρτών εικόνας. Τα περισσότερα προγράμματα επεξεργασίας εικόνων θα σας δείξουν τις συντεταγμένες του ποντικιού σας όταν δείχνετε στην εικόνα, που είναι όλα τα δεδομένα που χρειάζεστε για να ξεκινήσετε με τους χάρτες εικόνων.
Δημιουργία χάρτη εικόνων
Για να δημιουργήσετε έναν χάρτη εικόνας, επιλέξτε πρώτα μια εικόνα που θα χρησιμεύσει ως βάση του χάρτη. Η εικόνα πρέπει να έχει "κανονικό μέγεθος" - δηλαδή, δεν πρέπει να χρησιμοποιείτε μια εικόνα τόσο μεγάλη ώστε το πρόγραμμα περιήγησης να την κλιμακώσει.
Όταν εισάγετε την εικόνα, θα προσθέσετε ένα επιπλέον χαρακτηριστικό που προσδιορίζει τις συντεταγμένες του χάρτη:
Όταν δημιουργείτε έναν χάρτη εικόνας, δημιουργείτε μια περιοχή με δυνατότητα κλικ στην εικόνα, επομένως οι συντεταγμένες του χάρτη πρέπει να ευθυγραμμίζονται με το ύψος και το πλάτος της εικόνας που επιλέξατε. Οι χάρτες υποστηρίζουν τρεις διαφορετικούς τύπους σχημάτων:
- rect-ένα ορθογώνιο ή τετράπλευρο σχήμα
- πολύ-ένα πολύγωνο ή σχήμα πολλών όψεων
- circle-a κύκλος
Για να δημιουργήσετε τις περιοχές, πρέπει να απομονώσετε τις συγκεκριμένες συντεταγμένες που σκοπεύετε να χαρτογραφήσετε. Ένας χάρτης μπορεί να αποτελείται από μία ή περισσότερες καθορισμένες περιοχές στην εικόνα, στις οποίες, όταν κάνετε κλικ, ανοίγει έναν νέο υπερσύνδεσμο.
Για ένα ορθογώνιο, αντιστοιχίζετε μόνο την επάνω αριστερή και κάτω δεξιά γωνία. Όλες οι συντεταγμένες παρατίθενται ως x, y (πάνω, πάνω). Έτσι, για την επάνω αριστερή γωνία 0, 0 και την κάτω δεξιά γωνία 10, 15 θα πληκτρολογήσετε 0, 0, 10, 15. Στη συνέχεια το συμπεριλάβετε στον χάρτη:
Για ένα πολύγωνο, αντιστοιχίζετε κάθε συντεταγμένη x, y ξεχωριστά. Το πρόγραμμα περιήγησης Ιστού συνδέει αυτόματα το τελευταίο σύνολο συντεταγμένων με το πρώτο. οτιδήποτε μέσα σε αυτές τις συντεταγμένες είναι μέρος του χάρτη.
Τα σχήματα κύκλων απαιτούν μόνο δύο συντεταγμένες, όπως το ορθογώνιο, αλλά για τη δεύτερη συντεταγμένη, καθορίζετε την ακτίνα ή την απόσταση από το κέντρο του κύκλου. Έτσι, για έναν κύκλο με κέντρο στα 122, 122 και ακτίνα 5 θα γράφατε 122, 122, 5:
Όλες οι περιοχές και τα σχήματα μπορούν να συμπεριληφθούν στην ίδια ετικέτα χάρτη:
Συγκέντρωση
Οι χάρτες εικόνων ήταν πολύ πιο συνηθισμένοι στην εποχή του Web 1.0 της δεκαετίας του 1990 έως τις αρχές της δεκαετίας του 2000-οι χάρτες εικόνων συχνά αποτελούσαν τη βάση της πλοήγησης ενός ιστότοπου. Ένας σχεδιαστής θα δημιουργούσε κάποιο είδος εικόνας για να υποδείξει τα στοιχεία μενού και μετά θα όριζε έναν χάρτη.
Οι σύγχρονες προσεγγίσεις ενθαρρύνουν τον αποκριτικό σχεδιασμό και χρησιμοποιούν επικαλυπτόμενα φύλλα στυλ για τον έλεγχο της τοποθέτησης εικόνων και υπερσυνδέσμων σε μια σελίδα.
Αν και η ετικέτα χάρτη εξακολουθεί να υποστηρίζεται στο πρότυπο HTML, η χρήση κινητών συσκευών με μικρούς παράγοντες μορφής μπορεί να οδηγήσει σε απροσδόκητα προβλήματα απόδοσης με τους χάρτες εικόνας. Επιπλέον, προβλήματα εύρους ζώνης ή κατεστραμμένες εικόνες υποδηλώνουν την αξία ενός χάρτη εικόνας.
Επομένως, μη διστάσετε να συνεχίσετε να χρησιμοποιείτε αυτήν τη σταθερή, καλά κατανοητή τεχνολογία - γνωρίζοντας ότι υπάρχουν πιο αποτελεσματικές εναλλακτικές λύσεις επί του παρόντος στη μόδα με τους σχεδιαστές Ιστού.
