Πώς να κάνω μια αναφορά picture-in-picture; Πώς να εισάγετε ένα σύνδεσμο σε μια εικόνα

Δημιουργία πανό και χάρτες του τόπου, είναι αρχάριος webmasters αντιμέτωποι με ένα τέτοιο πρόβλημα, πώς να εισάγετε ένα σύνδεσμο σε μια εικόνα, κάνει με το φωτεινότερο και πιο ενδιαφέρον μενού. Αλλά πώς να την εφαρμόσει; Δεν υπάρχει τίποτα πιο εύκολο αν ξέρεις τη γλώσσα HTML.

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

Όταν χρησιμοποιείται εικόνα-σύνδεσμο

Πριν μιλήσουμε για το πώς να κάνει μια αναφορά picture-in-picture, θα καταλάβουμε πού και γιατί χρησιμοποιούνται. Μετά από όλα, θα είναι ευκολότερο να καταλάβουμε τι θέλουμε από την εικόνα.

Οι εικόνες συνδέσεις που χρησιμοποιούνται συνήθως ως banners, διαφημίσεις tout σχέδια. Τέτοια παραδείγματα είναι οι φωτογραφίες είναι όλες στην ίδια «VKontakte». Θυμηθείτε πόσες φορές έχετε κλικ στη φωτογραφία για την οποία έχει οικοδομηθεί μια συγκεκριμένη διεύθυνση; Επιπλέον, πολύ συχνά χρησιμοποιούνται με τη μορφή των ομάδων μενού και των κοινοτήτων, ειδικά εάν περιέχουν ειδικές ενδείξεις. Πολλές από αυτές τις εικόνες βρέθηκαν σε άλλους δικτυακούς τόπους.

Επικολλήστε τον σύνδεσμο στο προσκήνιο

Το πιο απλό πράγμα - μια εικόνα-σύνδεσμο. Αυτό είναι γι 'αυτό, μιλάμε για να ξεκινήσει. Αυτή η εικόνα είναι ένα έτοιμο αναφοράς. Δηλαδή κάνετε κλικ σε αυτό το εικονίδιο, θα μεταφερθείτε στη νέα σελίδα.

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

Έτσι, για να εφαρμόσει το σχέδιό του, θα πρέπει να έχετε την ίδια την εικόνα, ανεβάσει στο διαδίκτυο ή αποθηκεύονται στον υπολογιστή σας (ανάλογα με το αν εργάζεστε σε online mode, στην πραγματικότητα σχετικά με το site, ή zadeystvuete συντάκτες).

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

Στη συνέχεια, γράψτε το εξής: το site href="http:// εικόνα - έναν ειδικό κωδικό . Εικόνα-σύνδεση ορίζεται με τη βοήθειά του.

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

Κάντε ένα μενού των εικόνων

Η πρώτη μέθοδος αναπτύχθηκε ανεξάρτητα στη μελέτη των ιστοσελίδων Markup Language. Η δημιουργία ενός τέτοιου μενού μπορεί να διαρκέσει μερικές ώρες.

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

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

Πώς να κάνετε

Ας εξετάσουμε λίγο περισσότερο τον πρώτο τρόπο.

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

Έτσι, αν αποφασίσετε να πάτε με αυτόν τον τρόπο, θα χρειαστείτε μια εικόνα και ένα απλό γραφικό editor που σας επιτρέπει να κόψει τις εικόνες και να αναγράφονται στις ετικέτες τους, καθώς και ένα μέρος όπου θα μπορείτε να τα συμπληρώσετε.

Αν αυτή είναι η δική σας ιστοσελίδα - κατάλληλες συμβατικές γκαλερί ή τη βιβλιοθήκη αρχεία, για «VKontakte» μπορεί να είναι μια ομάδα άλμπουμ ή κοινότητα (κατά προτίμηση δωρεάν).

Περαιτέρω, η εικόνα που πρέπει να κοπεί σε κομμάτια, έτσι είναι αναγκαίο να θυμόμαστε την σειρά με την οποία λαμβάνονται τμήματα. Αποτυπωμένες επάνω τους επιγραφές και γεμίστε το διακομιστή, γράφουν οι αναφορές για κάθε εικόνα.

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

Κάνουμε ένα χάρτη της τοποθεσίας

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

Κατ 'αρχάς, θα πρέπει να θυμόμαστε ότι το sitemap είναι συνδεδεμένο με την εικόνα χρησιμοποιώντας το Usemap εντολή = «# map1, η οποία προβλέπεται στο img tag Ως εκ τούτου, συμπληρώνοντας την εικόνα στην περιοχή, να είστε βέβαιος να προσθέσει την ετικέτα στο δεύτερο μέρος -. Usemap =» # όνομα χάρτη».

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

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

συντόμευση ρυθμίσεις

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

Ας μιλήσουμε λίγο για τις βασικές παραμέτρους του σε συνδυασμό tag <χάρτη>. Κατά κύριο λόγο αυτό το όνομα, το οποίο είναι ίσο με την αξία Usemap. Έτσι θα ορίσει ότι η κάρτα είναι γραμμένο στην εικόνα.

Περαιτέρω μέσα στο ζευγάρι tag <χάρτη> συνταγογραφείται άλλη ετικέτα - <περιοχή>, το οποίο περιγράφει την περιοχή αναφοράς. Αυτός δεν είναι ο τύπος και, φυσικά, έχει τις δικές του παραμέτρους.

Η πρώτη - το σχήμα. Με τη βοήθεια ενός webmaster θέτει ένα είδος πεδίου. Αυτό μπορεί να είναι:

• κύκλο - κύκλο?
• ορθογώνιο - Ορθ?
• Πολυγώνου - πολυ?
• υπόλοιπο φωτογραφίες περιοχή - προεπιλογή.

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

Αναφέρουμε επίσης αρκετά διάσημο href, η οποία ορίζει την διεύθυνση του συνδέσμου.

Και η τελευταία επιλογή, η οποία πρέπει να αναφέρεται, - nohref. Αυτό δείχνει ότι η περιοχή αυτή δεν είναι μια αναφορά.

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

Συμβουλές

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

Όταν δημιουργείτε ένα sitemap συνιστάται να επιλέξετε μια εικόνα με μαλακό, μη-ερεθιστικό για τους οφθαλμούς. Πιστέψτε με, δεν είναι πάντα το κλειδί της επιτυχίας - φωτεινά -LINK εικόνα. «VKontakte», ωστόσο, συχνά εστιάζουν μόνο στην φωτεινότητα και showiness, με στόχο την προσέλκυση νέων επισκεπτών.

ευρήματα

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