Τα οφέλη και τα μειονεκτήματα στη χρήση χαρτών εικόνων
Υπήρξε ένα σημείο στην ιστορία του σχεδιασμού ιστοσελίδων όπου πολλοί χώροι χρησιμοποίησαν ένα χαρακτηριστικό γνωστό ως "χάρτες εικόνας". Αυτή είναι μια λίστα συντεταγμένων που συνδέονται με μια συγκεκριμένη εικόνα σε μια σελίδα. Αυτές οι συντεταγμένες δημιουργούν περιοχές υπερσύνδεσης σε αυτήν την εικόνα, ουσιαστικά προσθέτοντας "hot spots" σε ένα γραφικό, το καθένα από τα οποία μπορεί να κωδικοποιηθεί για να συνδεθεί με διαφορετικά μέρη. Αυτό είναι πολύ διαφορετικό από την προσθήκη μιας ετικέτας συνδέσμου σε μια εικόνα, η οποία θα μπορούσε να προκαλέσει ότι ολόκληρο το γραφικό θα γίνει ένας μεγάλος σύνδεσμος σε ένα μόνο προορισμό.
Παραδείγματα - φανταστείτε να έχετε ένα γραφικό αρχείο με μια εικόνα των Ηνωμένων Πολιτειών. Αν θελήσατε κάθε κράτος να είναι "clickable" έτσι πηγαίνουν σε σελίδες σχετικά με την συγκεκριμένη κατάσταση, θα μπορούσατε να το κάνετε αυτό με ένα χάρτη εικόνας. Ομοίως, αν είχατε μια εικόνα μιας μπάντας μουσικής, θα μπορούσατε να χρησιμοποιήσετε έναν χάρτη εικόνων για να μπορείτε να κάνετε κλικ σε κάθε μεμονωμένη μέλος σε μια επόμενη σελίδα σχετικά με το συγκεκριμένο μέλος της μπάντας.
Οι χάρτες εικόνας είναι χρήσιμοι; Σίγουρα ήταν, αλλά έχουν χάσει τη χάρη τους στον σημερινό ιστό. Αυτό συμβαίνει, τουλάχιστον εν μέρει, επειδή οι χάρτες εικόνας απαιτούν συγκεκριμένες συντεταγμένες για να δουλέψουν. Οι ιστότοποι σήμερα είναι κατασκευασμένοι ώστε να ανταποκρίνονται και να μεγεθύνουν την εικόνα ανάλογα με το μέγεθος μιας οθόνης ή συσκευής. Αυτό σημαίνει ότι οι προκαθορισμένες συντεταγμένες, όπως είναι οι τρόποι με τους οποίους λειτουργούν οι χάρτες εικόνων, υποχωρούν όταν ένας ιστότοπος κλιμακώνεται και οι εικόνες αλλάζουν μέγεθος. Αυτός είναι ο λόγος για τον οποίο οι χάρτες εικόνων σπάνια χρησιμοποιούνται σε ιστότοπους παραγωγών σήμερα, αλλά εξακολουθούν να έχουν πλεονεκτήματα για επιδείξεις ή περιπτώσεις όπου αναγκάζετε το μέγεθος μιας σελίδας.
Θέλετε να μάθετε πώς μπορείτε να δημιουργήσετε έναν χάρτη εικόνων, ειδικά πώς να το κάνετε με το Dreamweaver; . Η διαδικασία δεν είναι ιδιαίτερα δύσκολη, αλλά δεν είναι εύκολη ούτε και θα πρέπει να έχετε κάποια εμπειρία πριν ξεκινήσετε.
Ξεκινώντας
Ας αρχίσουμε. Το πρώτο βήμα που πρέπει να κάνετε είναι να προσθέσετε μια εικόνα στην ιστοσελίδα σας. Στη συνέχεια, κάντε κλικ στην εικόνα για να την επισημάνετε. Από εκεί, πρέπει να μεταβείτε στο μενού ιδιοτήτων (και να κάνετε κλικ σε ένα από τα τρία εργαλεία σχεδίασης hotspot: ορθογώνιο, κύκλο ή πολύγωνο.) Μην ξεχάσετε να ονομάσετε την εικόνα που μπορείτε να κάνετε στη γραμμή ιδιοκτησίας. οτιδήποτε θέλετε. Χρησιμοποιήστε το "χάρτη" ως παράδειγμα.
Τώρα, σύρετε το σχήμα που θέλετε στην εικόνα σας χρησιμοποιώντας ένα από αυτά τα εργαλεία. Αν χρειάζεστε ορθογώνια σποτ, χρησιμοποιήστε το ορθογώνιο. Ίδια για τον κύκλο. Αν θέλετε πιο πολύπλοκα σχήματα hotspot, χρησιμοποιήστε το πολύγωνο. Αυτό θα χρησιμοποιούσατε πιθανώς στο παράδειγμα του χάρτη των ΗΠΑ, αφού το πολύγωνο θα σας επιτρέψει να αφήσετε σημεία και να δημιουργήσετε πολύπλοκα και ακανόνιστα σχήματα στην εικόνα
Στο παράθυρο ιδιοτήτων για το hotspot, πληκτρολογήστε ή περιηγηθείτε στη σελίδα στην οποία θα πρέπει να συνδεθεί το hotspot. Αυτό δημιουργεί αυτή την περιοχή που μπορεί να συνδεθεί. Συνεχίστε να προσθέτετε τα hotspots μέχρι να ολοκληρωθεί ο χάρτης σας και να προστεθούν όλοι οι σύνδεσμοι που θέλετε να προσθέσετε.
Μόλις τελειώσετε, ανατρέξτε στον χάρτη εικόνας σας σε ένα πρόγραμμα περιήγησης για να βεβαιωθείτε ότι λειτουργεί σωστά. Κάντε κλικ σε κάθε σύνδεσμο για να βεβαιωθείτε ότι πηγαίνει στον κατάλληλο πόρο ή ιστοσελίδα.
Μειονεκτήματα των Χαρτών Εικόνας
Για άλλη μια φορά, να γνωρίζετε ότι οι χάρτες εικόνας έχουν πολλά μειονεκτήματα, ακόμη και εκτός της προαναφερθείσας έλλειψης υποστήριξης με ανταποκρινόμενες ιστοσελίδες. Οι πυρήνες, μικρές λεπτομέρειες μπορεί να είναι συγκεχυμένες σε έναν χάρτη εικόνων. Για παράδειγμα, οι χάρτες γεωγραφικών εικόνων μπορεί να βοηθήσουν στον προσδιορισμό σε ποια ήπειρο είναι χρήστης, αλλά αυτοί οι χάρτες ενδέχεται να μην είναι αρκετά λεπτομερείς ώστε να εντοπίζουν τη χώρα προέλευσης του χρήστη. Αυτό σημαίνει ότι ένας χάρτης εικόνων μπορεί να βοηθήσει στον προσδιορισμό του εάν ένας χρήστης προέρχεται από την Ασία αλλά όχι από την Καμπότζη ειδικότερα.
Οι χάρτες εικόνων ενδέχεται επίσης να φορτώνονται αργά. Δεν πρέπει να χρησιμοποιούνται πολλές φορές σε έναν ιστότοπο, διότι καταλαμβάνουν πάρα πολύ χώρο για να χρησιμοποιηθούν σε κάθε σελίδα μιας ιστοσελίδας. Πάρα πολλοί χάρτες εικόνων σε μία σελίδα θα δημιουργούσαν μια σοβαρή συμφόρηση και μια τεράστια επίδραση στην απόδοση του ιστότοπου .
Τέλος, οι χάρτες εικόνων ενδέχεται να μην είναι εύκολοι για χρήστες με προβλήματα οπτικής πρόσβασης. Εάν χρησιμοποιήσατε χάρτες εικόνων, θα πρέπει επίσης να δημιουργήσετε ένα άλλο σύστημα πλοήγησης για αυτούς τους χρήστες ως εναλλακτική λύση.
Συμπέρασμα
Χρησιμοποιώ χάρτες εικόνων από καιρό σε καιρό όταν προσπαθώ να βάλω μαζί μια γρήγορη επίδειξη ενός σχεδίου και πώς λειτουργεί. Για παράδειγμα, μπορεί να χλευάζω ένα σχέδιο για μια εφαρμογή για κινητά και θέλω να χρησιμοποιήσω χάρτες εικόνων για να δημιουργήσω hotspots για την προσομοίωση της διαδραστικότητας της εφαρμογής. Αυτό είναι πολύ πιο εύκολο από ό, τι θα ήταν να κωδικοποιήσετε την εφαρμογή, ή ακόμα και να δημιουργήσετε ομοιόμορφες ιστοσελίδες που έχουν κατασκευαστεί σύμφωνα με τα τρέχοντα πρότυπα με HTML και CSS. Σε αυτό το συγκεκριμένο παράδειγμα και επειδή ξέρω σε ποια συσκευή θα επιδείξω το σχεδιασμό και θα μπορέσω να προσαρμόσω τον κώδικα σε αυτήν τη συσκευή, λειτουργεί ένας χάρτης εικόνων, αλλά η τοποθέτησή τους σε μια τοποθεσία παραγωγής ή μια εφαρμογή είναι πολύ δύσκολη και θα πρέπει πιθανώς να αποφευχθεί στις σημερινές ιστοσελίδες.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 9/7/17.