Πώς να δημιουργήσετε χάρτες εικόνων χωρίς πρόγραμμα επεξεργασίας χαρτών εικόνας

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

Δημιουργία χάρτη εικόνας

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

Όταν εισάγετε την εικόνα, θα προσθέσετε ένα επιπλέον χαρακτηριστικό που προσδιορίζει τις συντεταγμένες του χάρτη:

Όταν δημιουργείτε έναν χάρτη εικόνας, δημιουργείτε μια περιοχή στην οποία μπορείτε να κάνετε κλικ στην εικόνα, επομένως οι συντεταγμένες του χάρτη πρέπει να ευθυγραμμίζονται με το ύψος και το πλάτος της εικόνας που επιλέξατε. Οι χάρτες υποστηρίζουν τρεις διαφορετικούς τύπους σχημάτων:

• ορθογώνιο — ορθογώνιο ή τετράπλευρο σχήμα
• πολύ—ένα πολύγωνο ή πολύπλευρο σχήμα
• κύκλος — κύκλος

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

Για ένα ορθογώνιο παραλληλόγραμμο, αντιστοιχίζετε μόνο την επάνω αριστερή και κάτω δεξιά γωνία. Όλες οι συντεταγμένες αναφέρονται ως x, y (πάνω, πάνω). Έτσι, για την επάνω αριστερή γωνία 0,0 και την κάτω δεξιά γωνία 10,15 θα πληκτρολογήσετε 0,0,10,15. Στη συνέχεια, το συμπεριλάβετε στον χάρτη:

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

Κύκλος Τα σχήματα απαιτούν μόνο δύο συντεταγμένες, όπως το ορθογώνιο, αλλά για τη δεύτερη συντεταγμένη, καθορίζετε την ακτίνα ή την απόσταση από το κέντρο του κύκλου. Έτσι, για έναν κύκλο με κέντρο 122.122 και ακτίνα 5 θα γράφατε 122.122.5:

Όλες οι περιοχές και τα σχήματα μπορούν να συμπεριληφθούν στην ίδια ετικέτα χάρτη:

Θεωρήσεις

Οι χάρτες εικόνων ήταν πολύ πιο συνηθισμένοι στην εποχή του Web 1.0 της δεκαετίας του 1990 έως τις αρχές της δεκαετίας του 2000—οι χάρτες εικόνων συχνά αποτελούσαν τη βάση της πλοήγησης ενός ιστότοπου. Ένας σχεδιαστής θα δημιουργούσε κάποιο είδος εικόνας για να υποδείξει τα στοιχεία του μενού και μετά θα όριζε έναν χάρτη.

Οι σύγχρονες προσεγγίσεις ενθαρρύνουν τη σχεδίαση με απόκριση και χρησιμοποιούν φύλλα στυλ για τον έλεγχο της τοποθέτησης εικόνων και υπερσυνδέσμων σε μια σελίδα.

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

Επομένως, μη διστάσετε να συνεχίσετε να χρησιμοποιείτε αυτήν τη σταθερή, καλά κατανοητή τεχνολογία — γνωρίζοντας ότι υπάρχουν πιο αποτελεσματικές εναλλακτικές λύσεις αυτήν τη στιγμή στη μόδα με σχεδιαστές ιστοσελίδων.