Δημιουργία συνδέσμων εικόνας και χαρτών εικόνας

• Ενδέχεται 18, 2024

Αυτή η εβδομάδα απαντά σε μια ερώτηση του αναγνώστη - "Μπορείτε να εξηγήσετε πώς να κάνετε μια σύνδεση εικόνας σε μια σελίδα σε HTML". Υπάρχουν μερικές διαφορετικές τεχνικές που μπορείτε να χρησιμοποιήσετε για συνδεδεμένες εικόνες. Το ένα είναι να συνδέσετε ολόκληρη την εικόνα με το HTML και το άλλο να κάνετε έναν χάρτη εικόνων - όπου διαφορετικά μέρη της ίδιας εικόνας συνδέονται με διαφορετικές τοποθεσίες.

Συνδεδεμένη εικόνα σε HTML

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



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

Κοπή εικόνας στο Photoshop

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

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

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

Αφού η εικόνα σας είναι πλήρως κομμένη σε φέτες, το επόμενο βήμα είναι να χρησιμοποιήσετε το εργαλείο "slice select", κάντε κλικ σε κάθε κομμάτι και από εκεί επιλέξτε το "slice" τύπου φέτας. Κάτω από αυτό συμπληρώστε τη διεύθυνση url όπου θέλετε να ακολουθήσει αυτή η φέτα ακολουθούμενη από το πεδίο alt tag στο κάτω μέρος. Τα άλλα πεδία δεν είναι απαραίτητα για απλή χαρτογράφηση εικόνων. Μετακινήστε με κάθε κομμάτι με τον ίδιο τρόπο μέχρι να απεικονιστεί ολόκληρη η εικόνα.

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

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

Οδηγίες Βίντεο: Word - Εισαγωγή Εικόνας και Διάταξη (Ενδέχεται 2024).