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

Οι χάρτες εικόνων είναι απλά απλές ετικέτες HTML

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

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

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

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

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

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

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

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

"Morris"

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

"Garfield"

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

"Catbert" Όλες οι περιοχές και τα σχήματα μπορεί να περιλαμβάνονται στην ίδια ετικέτα χάρτη:

"Morris" <σχήμα περιοχής =" circ "coords =" 122,122,5 "html =" catbert.htm "alt =" Catbert ">

Σκέψεις

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

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

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

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