WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— Add- On για WorldWideScripts.net

Εγγραφείτε για να μας ζωοτροφές για να μείνετε ενημερωμένοι!

Νέο! Ακολουθήστε μας όπως εσείς το θέλετε!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Αυτή είναι μια χαρτογράφηση html εικόνα σχεδιαστεί για τους web developers.

Το εργαλείο έχει αναπτυχθεί χρησιμοποιώντας τον καμβά HTML5, έτσι ώστε η χρήση του περιορίζεται στους browsers που υποστηρίζουν τον καμβά, αλλά και το API του αρχείου:

IE10 +, FF3.6 +, FF14-, FF18 + (το FF15 έχουν προβλήματα με ορισμένες λειτουργίες καμβά, Bug 787.623, που θα πρέπει να επιλυθούν στο FF18), Chrome6 +, Safari6 +, Opera11.1 +

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

Έχω χρησιμοποιήσει FF14 για την ανάπτυξη του εργαλείου, έτσι αυτό είναι η καλύτερη επιλογή, αλλά το εργαλείο έχει δοκιμαστεί επίσης σε Chrome22 και Opera12


Σημείωση: Η έκδοση του εργαλείου που μπορείτε να δείτε στο σύνδεσμο Live Preview, είναι μια περιορισμένη έκδοση του εργαλείου. Με αυτή την έκδοση μπορείτε να φορτώσετε μόνο ένα συγκεκριμένο σύνολο των εικόνων, που αναφέρονται στην αρχική σελίδα. Μετά την τοποθέτηση μιας εικόνας μπορείτε να σχεδιάσετε όλα τα σχήματα, αλλά μόνο τα 6 πρώτα σχήματα θα δημιουργηθεί στον κώδικα HTML. Ο περιορισμός αυτός δεν εμποδίζει να δοκιμάσετε όλες τις λειτουργίες του εργαλείου.


Τι είναι μια εικόνα χάρτη;

Ο χάρτης εικόνας είναι μια κώδικα HTML που κάνει το χρήστη clickable διαφορετικές περιοχές της εικόνας. Ο κώδικας HTML αποτελείται από τον χάρτη ετικέτα HTML, σε συνδυασμό με την ετικέτα περιοχής, που σας επιτρέπει να ορίσετε περιοχές με ορθογώνια, πολυγωνική και κυκλικά σχήματα.
Για παράδειγμα, αν έχετε την εικόνα image1.png στην HTML σελίδα σας, μπορείτε να γράψετε τον ακόλουθο κώδικα:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

Όπως μπορείτε να δείτε, θα πρέπει να ορίσετε το χαρακτηριστικό Usemap στην ετικέτα img, που θα έχουν την ίδια αξία του χαρακτηριστικού όνομα στην ετικέτα χάρτη. Μεταξύ του <χάρτη> και </ map> μπορείτε να ορίσετε όσες <περιοχή> ετικέτες όπως θέλετε, το καθένα αντιπροσωπεύει ένα χρήστη-clickable περιοχή επί της συνδεδεμένης εικόνας. Κάθε περιοχή πρέπει να έχουν ένα χαρακτηριστικό σχήμα, που μπορεί να έχει μια από τις 3 τιμές: recT, πολυ και ο κύκλος. Το σχήμα rect πλήρως ορίζεται από τα σημεία 2, πολυ σχήμα ορίζεται από μια ακολουθία σημείων και ένα σχήμα κύκλου ορίζεται από ένα σημείο, που αντιπροσωπεύει το κέντρο, και ακτίνα. Όλα τα σημεία που ορίζονται από ένα ζευγάρι των συντεταγμένων, που εκφράζεται σε pixels, συγγενείς στην πάνω αριστερή γωνία της εικόνας. Το χαρακτηριστικό σχήμα μπορεί επίσης να έχουν την "default" τιμή, που αφορούν τα τμήματα της εικόνας δεν αντιστοιχίζονται με οποιαδήποτε από τις προηγούμενες μορφές. Λάβετε υπόψη, αντίθετα, ότι η σειρά με την οποία τα σχήματα που ορίζονται στον χάρτη είναι πολύ σημαντικό: εάν ορίσετε το "default" σχήμα, όπως το πρώτο σχήμα στο χάρτη, θα αντικαταστήσει όλα τα επόμενα σχήματα, γιατί το "default" σχήμα αναφέρεται σε όλη την εικόνα. Αυτό ισχύει, επίσης, με τις μορφές που επικαλύπτουν η μία την άλλη: μπορείτε να ορίσετε ένα μικρό σχήμα σε ένα μεγαλύτερο σχήμα, αλλά θα πρέπει να ορίσετε πρώτα το μικρό σχήμα και στη συνέχεια το μεγαλύτερο. Αν 2 σχήματα μοιράζονται ένα μέρος της εικόνας, το σχήμα που ορίζεται πρώτος, κερδίζει.

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

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

Μετά την κατάρτιση των σχημάτων σχετικά με τη συγκεκριμένη εικόνα, μπορείτε να δημιουργήσετε τον κώδικα HTML απλά κάνοντας κλικ σε ένα κουμπί και ο κωδικός θα displayied σε μια περιοχή κειμένου. Μπορείτε να αντιγράψετε τον κώδικα HTML και να το χρησιμοποιήσετε σε HTML σελίδα (ες) σας. Μπορείτε επίσης να κάνετε την αντίστροφη διαδικασία: επικόλληση του κώδικα HTML στην περιοχή κειμένου, μπορείτε να τοποθετήσετε αυτόν τον κώδικα απλά πατώντας ένα κουμπί? Αυτό θα μεταφραστεί στα σχήματα στην εικόνα και μπορείτε να τα τροποποιήσει, να προσθέσει νέα σχήματα και να δημιουργήσετε ξανά τον κώδικα HTML. Αυτή η αντίστροφη μηχανισμός είναι χρήσιμη για να σας επιτρέψει να αποθηκεύσετε μια μερική διαδικασία χαρτογράφησης και να συνεχίσει να χαρτογραφήσει την εικόνα αργότερα. Είναι επίσης χρήσιμο για να βελτιώσετε την "χειροκίνητα" το σχήμα σχεδιασμό / τοποθέτηση: μετά τη δημιουργία του κώδικα στην περιοχή κειμένου, μπορείτε να τροποποιήσετε τις συντεταγμένες στην περιοχή κειμένου on the fly και την εκ νέου φόρτωση.

Κύρια χαρακτηριστικά:

  • Μπορείτε να επιλέξετε μια τοπική ή απομακρυσμένη εικόνα
  • Μπορείτε να ορίσετε το μέγεθος της εικόνας του στόχου: αυτά είναι τα μεγέθη ότι η εικόνα θα έχει στην HTML σελίδα σας
  • Μπορείτε να κάνετε μεγέθυνση και σμίκρυνση της εικόνας σε οποιαδήποτε στιγμή και αυτό δεν θα επηρεάσει τις πραγματικές συντεταγμένες που θα δημιουργηθεί, που εξαρτάται μόνο από το μέγεθος στόχο της εικόνας. Η λειτουργία ζουμ είναι χρήσιμο μόνο για να σας βοηθήσει να σχεδιάσετε τα σχήματα.
  • Μπορείτε να ρυθμίσετε διάφορες παραμέτρους για κάθε σχήμα, όπως το "href" χαρακτηριστικό, το "alt", του "id" και "κατηγορία" χαρακτηριστικά και, τέλος, το "στόχο" χαρακτηριστικό. Για να ρυθμίσετε την παράμετρο θα πρέπει να επιλέξετε το σχήμα: για να επιλέξετε ένα σχήμα θα πρέπει να επιλέξετε το top-αριστερό βέλος στη γραμμή εργαλείων και, στη συνέχεια, κάντε κλικ στο σχήμα.
  • Μπορείτε να ρυθμίσετε κάποιες παραμέτρους για το χάρτη: ο χάρτης "όνομα", η προεπιλεγμένη διεύθυνση URL και το στόχο.
  • Μπορείτε να σχεδιάσετε ένα σχήμα που επέλεξε το σχήμα από μια γραμμή εργαλείων.
  • Για να σχεδιάσετε ένα σχήμα, μετά την επιλογή του από τη γραμμή εργαλείων, μπορείτε απλά να κάνετε κλικ με το ποντίκι πάνω στην εικόνα, όπου θέλετε να ξεκινήσετε το σχήμα.
  • Αν το σχήμα είναι ένας κύκλος, το σημείο φλερτάρει είναι το κέντρο: τη μετακίνηση του ποντικιού (κλικ ή απελευθερώνονται), μπορείτε να δείτε έναν κύκλο που ακολουθούν το δρομέα. Κάνοντας κλικ με το ποντίκι ξανά θα σταματήσει τον κύκλο σχεδίασης.
  • Αν το σχήμα είναι ένα ορθ. Το πρώτο σημείο είναι ένα από τη γωνία. Μετακινώντας το ποντίκι (κλικ ή κυκλοφορήσει) θα καταρτίσει ένα ορθ. Κάνοντας κλικ με το ποντίκι ξανά θα σταματήσει την κατάρτιση.
  • Αν το σχήμα είναι ένα πολυ η διαδικασία είναι λίγο διαφορετική: κάθε κλικ του ποντικιού θα δημιουργήσει ένα σημείο? το τρέχον σημείο είναι πάντα συνδεδεμένο με το ένα έλατα, καθιστώντας το πολυ πάντα ένα κλειστό σχήμα? να σταματήσει να επιστήσει την πολυ (για να ρυθμίσετε το τελευταίο σημείο), θα πρέπει να κάνετε διπλό κλικ με το ποντίκι.
  • Για όλα τα σχήματα μπορείτε επίσης να σταματήσει να τους επιστήσει κλικ στο κουμπί "stop" (το κορυφαίο αριστερό βέλος στη γραμμή εργαλείων).
  • Μπορείτε να δείτε τις συντεταγμένες του ποντικιού όταν το μετακινήσετε στην εικόνα.
  • Μπορείτε να χρησιμοποιήσετε το γκρι-διακεκομμένο περίγραμμα γύρω από την εικόνα για να καθορίσει τις συντεταγμένες άκρη της εικόνας, ώστε να μπορείτε να χρησιμοποιήσετε τα σύνορα όπως ήταν μέρος της εικόνας: ναι, μπορείτε να κάνετε κλικ στα σύνορα κατά τη διάρκεια του σχήματος σχέδιο, το jus όπως ήταν μέρος της εικόνας. Για παράδειγμα, εάν κάνετε κλικ στην πάνω αριστερή γωνία των συνόρων, θα οριστεί ένα σημείο στο (0, 0) συντεταγμένες. Αν κάνετε κλικ στο αριστερό σύνορα, σε οποιοδήποτε σημείο, μπορείτε να ορίσετε ένα σημείο στο (0, y) συντεταγμένες, κ.λπ.
  • Μπορείτε να επιλέξετε μια ήδη επιστήσει σχήμα και να τροποποιήσει / αλλάξει το μέγεθος / αφαιρέσετε. Για να το αφαιρέσετε θα πρέπει να χρησιμοποιήσετε το "λάστιχο" στη γραμμή εργαλείων, η οποία θα εμφανιστεί ως ένας γύρισε κάτω το μολύβι επιλέγοντας μόνο ένα σχήμα.
  • Μπορείτε να επιλέξετε το χρώμα του περιγράμματος των σχημάτων από ένα σύνολο 5 χρώματα (αυτό δεν είναι ένα εργαλείο σχεδιασμού, έτσι έχω περιορίσει τον αριθμό των χρωμάτων και, επίσης, δεν μπορείτε να επιλέξετε ένα διαφορετικό χρώμα για κάθε σχήμα).
  • Μπορείτε να κάνετε κλικ στο κουμπί «χάρτης», που είναι ορατή μόνο όταν επιλέγετε το πλήκτρο "Stop" στη γραμμή εργαλείων και όχι το σχήμα επιλέγεται: εάν έχετε κάποια σχήματα που πάνω στην εικόνα θα δείτε τον κώδικα HTML σε ένα textarea, αν δεν έχουν ακόμη καταλήξει σε ένα σχήμα που θα δείτε μια κενή περιοχή κειμένου, αλλά μπορείτε παρελθόν σε αυτό κάποια κώδικα HTML και το φορτίο αυτό.
  • Κάνοντας κλικ στο κουμπί "φορτίο" (που μπορείτε να δείτε μόνο πατώντας το κουμπί "χάρτη" ​​για), ο κώδικας HTML που υπάρχουν στο textarea θα μεταφραστεί σε σχήματα στην εικόνα.

Μπορείτε να συμβουλευθείτε το πλήρες εγχειρίδιο του εργαλείου στον ακόλουθο σύνδεσμο: Ηλεκτρονικό Εγχειρίδιο

Αν έχετε οποιεσδήποτε απορίες, απλά αφήστε ένα σχόλιο ή στείλτε μου ένα email!


Λήψη
Άλλα στοιχεία σε αυτή την κατηγορίαΌλα τα συστατικά αυτού του συγγραφέα
ΣχόλιαΣυχνές ερωτήσεις και απαντήσεις

Properties

Δημιουργήθηκε:
10 Οκτ 12

Τελευταία ενημέρωση:
N / A

Υψηλής ανάλυσης:
Κανένα

Συμβατά προγράμματα περιήγησης:
Firefox, Opera, Chrome

Αρχείων που περιλαμβάνονται:
JS JavaScript, HTML, CSS

Έκδοση Λογισμικού:
HTML5

Λέξεις-κλειδιά

το ηλεκτρονικό εμπόριο, το ηλεκτρονικό εμπόριο, Όλα τα Προϊόντα, app, έκταση, καμβάς, κύκλος, συντονίζει, HTML5, εικόνα, χάρτης, mapper, πολυ, ορθ, σχήμα, στόχος, εργαλείο, ζουμ