Οι καθαριστές του Διαδικτύου θεωρούν τον Παγκόσμιο Ιστό κυρίως ένα όχημα για τη διάδοση πληροφοριών. Πολλές από αυτές τις πληροφορίες είναι σε μορφή κειμένου, η οποία μπορεί να αποδοθεί εύκολα από οποιοδήποτε πρόγραμμα περιήγησης στο Web. Αλλά ακόμη και από τις πρώτες μέρες του Διαδικτύου, τα γραφικά έχουν διαδραματίσει σημαντικό ρόλο στην ενίσχυση της βασικής σελίδας κειμένου. Αυτές τις μέρες, δεν είναι ασυνήθιστο να βλέπουμε ιστότοπους με γραφικό ενενήντα τοις εκατό. Αυτοί οι ιστότοποι ενδέχεται να μην συμμορφώνονται με την αυστηρή έννοια της διάδοσης πληροφοριών, αλλά ορισμένοι από αυτούς είναι σίγουρα ελκυστικοί.
Οι περισσότεροι από εμάς προσπαθούμε για ισορροπία μεταξύ κειμένου και γραφικών στις ιστοσελίδες μας. Τα γραφικά χρησιμεύουν για να βελτιώσουν την εμφάνιση και την αναγνωσιμότητα της σελίδας. Οι τυπικές χρήσεις για γραφικά περιλαμβάνουν πανό, διαφημίσεις από χορηγίες εταιρειών και έγχρωμες κουκκίδες για να επισημάνουν σημαντικά κομμάτια κειμένου.
Η γλώσσα scripting JavaScript μπορεί να χρησιμοποιηθεί για να βελτιώσει τα γραφικά που τοποθετείτε στις ιστοσελίδες σας. Το JavaScript μπορεί να χρησιμοποιηθεί για τον δυναμικό έλεγχο του γραφικού περιεχομένου της σελίδας. Για παράδειγμα, μπορείτε να εμφανίσετε ένα φόντο για τη σελίδα σας το πρωί και ένα άλλο το απόγευμα. Και τη νύχτα μπορείτε να χρησιμοποιήσετε φόντο αστέρι. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το JavaScript για να δημιουργήσετε την οθόνη για ψηφιακά ρολόγια, μετρητές επιτυχίας, γραφήματα ράβδων και άλλα.
Στη στήλη αυτού του μήνα περιγράφονται διάφοροι τρόποι με τους οποίους μπορείτε να χρησιμοποιήσετε JavaScript και γραφικά. Αλλά ένα αξιοσημείωτο θέμα λείπει από αυτήν τη συζήτηση: η χρήση JavaScript για κινούμενα σχέδια. Αυτό το θέμα αξίζει τη δική του στήλη, σύντομα.
Κατανόηση του στοιχείου εικόνας HTML
ο Το στοιχείο είναι η πιο συχνά χρησιμοποιούμενη ετικέτα για την αναπαράσταση γραφικού περιεχομένου σε ένα έγγραφο HTML (οι τελευταίες προδιαγραφές HTML προσθέτουν ένα στοιχείο, αλλά δεν υποστηρίζεται ακόμη από το Netscape και τα περισσότερα άλλα προγράμματα περιήγησης). Για τους άγνωστους, τη σύνταξη του βασικού
η ετικέτα είναι:
όπου "url" είναι μια σωστά κατασκευασμένη διεύθυνση URL για το αρχείο εικόνας. Η διεύθυνση URL μπορεί να είναι απόλυτη ή σχετική. Να θυμάστε ότι δεν είναι όλα τα προγράμματα περιήγησης εξοπλισμένα για την εμφάνιση γραφικών. Επομένως, συνιστάται να συμπεριλάβετε "εναλλακτικό κείμενο" για την εικόνα για όσους αντιμετωπίζουν προβλήματα. Χρησιμοποιήστε το χαρακτηριστικό ALT μέσα στο για να καθορίσετε εναλλακτικό κείμενο. Ακολουθεί ένα παράδειγμα:
Εικόνες που δημιουργήθηκαν με το θεωρούνται "inline" επειδή αντιμετωπίζονται ακριβώς όπως χαρακτήρες κειμένου. Αυτό σημαίνει ότι μπορείτε να διασταυρώσετε εικόνες με κείμενο και το πρόγραμμα περιήγησης θα φροντίσει να διασφαλίσει ότι όλα ρέουν σωστά.
Ωστόσο, οι περισσότερες εικόνες είναι ψηλότερες από το κείμενο που τις περιβάλλει. Η φυσιολογική συμπεριφορά των περισσότερων προγραμμάτων περιήγησης είναι να τοποθετήσετε το κάτω μέρος της εικόνας με το κάτω μέρος του κειμένου που το περιβάλλει. Μπορείτε να αλλάξετε αυτήν τη συμπεριφορά εάν θέλετε μια διαφορετική ευθυγράμμιση. Οι πιο κοινές επιλογές ευθυγράμμισης, κατανοητές από όλα τα προγράμματα περιήγησης που εμφανίζουν εικόνες, είναι:
- κάτω - Ευθυγραμμίζει το κείμενο στο κάτω μέρος της εικόνας. Αυτή είναι η προεπιλογή.
- μεσαίο - Ευθυγραμμίζει το κείμενο στο μέσο της εικόνας.
- κορυφή - Ευθυγραμμίζει το κείμενο με την κορυφή της εικόνας.
Μπορείτε να χρησιμοποιήσετε μόνο μία στοίχιση κάθε φορά. Η σύνταξη είναι:
Τα προγράμματα περιήγησης εμφανίζουν συνήθως εικόνες στο "φυσικό τους μέγεθος". Αν μια εικόνα είναι 100 pixel επί 100 pixel, για παράδειγμα, είναι τόσο μεγάλη όταν αποδίδεται στην οθόνη του προγράμματος περιήγησης. Αλλά με το Netscape μπορείτε να αλλάξετε το μέγεθος της εικόνας εάν θέλετε μικρότερο ή μεγαλύτερο, χρησιμοποιώντας τα χαρακτηριστικά WIDTH και HEIGHT. Ένα πλεονέκτημα αυτών των χαρακτηριστικών είναι ότι, όταν χρησιμοποιείται, το πρόγραμμα περιήγησης δημιουργεί ένα κενό πλαίσιο για την εικόνα και στη συνέχεια γεμίζει το πλαίσιο με την εικόνα καθώς φορτώνεται ολόκληρη η σελίδα. Αυτό προκαλεί στους χρήστες ότι αναμένεται ένα γραφικό σε αυτό το σημείο.
Καθορισμός μόνο του πλάτους ή το ύψος αλλάζει το μέγεθος της εικόνας σε αναλογία. Για παράδειγμα, ο καθορισμός μεγεθών μιας τετραγωνικής εικόνας σε ύψος και πλάτος 100 pixel. Εάν η αρχική εικόνα δεν είναι τετράγωνη, έχει μέγεθος σε σχετική αναλογία. Για παράδειγμα, εάν η αρχική εικόνα έχει πλάτος 400 pixel και ύψος 100 pixel, η αλλαγή του πλάτους σε 100 pixel μειώνει την εικόνα σε ύψος 25 pixel.
- Καθορισμός και του πλάτους και Το ύψος σας επιτρέπει να αλλάξετε την αναλογία της εικόνας με όποιον τρόπο θέλετε. Για παράδειγμα, μπορείτε να μετατρέψετε αυτήν την εικόνα 400 με 100 pixel σε 120 με 120, 75 με 90 ή οτιδήποτε άλλο.
Για παράδειγμα:
Προσοχή: Όταν συνδυάζεται με JavaScript θα πρέπει πάντα παρέχει τα χαρακτηριστικά HEIGHT και WIDTH για
Συνδυασμός εικόνων με JavaScript
Το JavaScript μπορεί να χρησιμοποιηθεί για την ενίσχυση εικόνων που χρησιμοποιούνται σε έγγραφα HTML. Για παράδειγμα, μπορείτε να χρησιμοποιήσετε το JavaScript για να δημιουργήσετε δυναμικά μια σελίδα χρησιμοποιώντας εικόνες που επιλέγονται από μια υπό όρους δοκιμαστική έκφραση, όπως η ώρα της ημέρας.
Στην πραγματικότητα, η εφαρμογή ψηφιακού ρολογιού JavaScript, η οποία χρησιμοποιεί JavaScript και μια ποικιλία εικόνων GIF, είναι μία από τις πιο δημοφιλείς στον Ιστό. Το παράδειγμα clock.html χρησιμοποιεί JavaScript για να εμφανίσει την τρέχουσα ώρα, χρησιμοποιώντας μεγάλα πράσινα ψηφία LED. Κάθε ψηφίο είναι ένα μεμονωμένο GIF, συνδεδεμένο με JavaScript για να σχηματίσει το πρόσωπο ενός ψηφιακού ρολογιού.
Χρησιμοποίησα ψηφία GIF που παρέχονται από τον Russ Walsh. Ο Russ επιτρέπει ευγενικά στα GIF του να χρησιμοποιούνται ελεύθερα σε ιστοσελίδες, αρκεί να δοθεί η κατάλληλη πίστωση. Μπορείτε να χρησιμοποιήσετε τα ψηφία που θέλετε για το ρολόι σας, αλλά πρέπει να παρέχετε ένα ξεχωριστό αρχείο GIF για κάθε αριθμό και ξεχωριστά αρχεία το καθένα για τις ενδείξεις άνω και κάτω τελείας και am / pm. Αλλάξτε τον κωδικό clock.html για να αναφέρετε τα ψηφία των αρχείων που θέλετε να χρησιμοποιήσετε.
Σημείωση: Είναι σημαντικό να παρέχετε το απόλυτος Διεύθυνση URL για τις εικόνες που χρησιμοποιείτε. Διαφορετικά, το Netscape δεν θα εμφανίσει τα γραφικά. Το παράδειγμα clock.html χρησιμοποιεί μια συνάρτηση (pathOnly) για την εξαγωγή της τρέχουσας διαδρομής του εγγράφου. Επομένως, το σενάριο αναμένει να βρει τις εικόνες στην ίδια διαδρομή με το έγγραφο. Εναλλακτικά, μπορείτε να κωδικοποιήσετε το απόλυτο URL εάν τοποθετήσετε τις εικόνες αλλού ή μπορείτε να χρησιμοποιήσετε την ετικέτα στην αρχή του εγγράφου για να πείτε ρητά στη Netscape τη βασική διεύθυνση URL που θέλετε να χρησιμοποιήσετε.Ψηφιακό ρολόι JavaScript
Ψηφιακό ρολόι JavaScript var Temp; setClock (); συνάρτηση setClock () {var OpenImg = '
'Temp = "" now = new Date (); var CurHour = now.getHours (); var CurMinute = now.getMinutes (); τώρα = null; εάν (CurHour> = 12) {CurHour = CurHour - 12; Ampm = "pm"; } αλλ Ampm = "am"; if (CurHour == 0) CurHour = "12" if (CurMinute <10) CurMinute = "0" + CurMinute else CurMinute = "" + CurMinute
CurHour = "" + CurHour; για (Count = 0; Count 'for (Count = 0; Count <CurMinute.length; Count ++) {Temp + = OpenImg + CurMinute.substring (Count, Count + 1) + CloseImg} Temp + = OpenImg + Ampm + CloseImg}
λειτουργία pathOnly (InString) {LastSlash = InString.lastIndexOf ('/', InString.length-1) OutString = InString.substring (0, LastSlash + 1) return (OutString); }
Το ρολόι JavaScript
Η τρέχουσα ώρα είναι: document.write (Temp);
Χρήση JavaScript με χάρτες εικόνων από την πλευρά του πελάτη
Εάν είστε αρκετά τυχεροί που έχετε τον έλεγχο του διακομιστή που περιέχει τις δημοσιευμένες ιστοσελίδες σας, πιθανότατα να έχετε πειράξει με χάρτες εικόνων από τον διακομιστή. Αυτές είναι εικόνες που έχουν "τεμαχιστεί" σε μικρότερα κομμάτια. καθώς ο χρήστης κάνει κλικ σε κάθε κομμάτι, ο διακομιστής αποκρίνεται σε μια διαφορετική ενέργεια.
Οι χάρτες εικόνας από την πλευρά του διακομιστή είναι ότι χρειάζεστε ένα πρόγραμμα CGI που εκτελείται στο διακομιστή για να χειριστεί τα αιτήματα κλικ. Δεν έχουν όλοι πρόσβαση στο CGI. Οι χάρτες εικόνας από την πλευρά του πελάτη αλλάζουν ότι: Η "ευφυΐα" για την ανατομή της εικόνας και την κατεύθυνση του χρήστη στον κατάλληλο σύνδεσμο - με βάση την περιοχή της εικόνας που έγινε κλικ - είναι ενσωματωμένη στο πρόγραμμα περιήγησης. Το Netscape Navigator (έκδοση 2.0 και νεότερη έκδοση) είναι ένα από τα πολλά προγράμματα περιήγησης που υποστηρίζουν τώρα αυτό το πρότυπο.
Το Netscape προχωρά τη διαδικασία ένα βήμα παραπέρα, ωστόσο, σας επιτρέπει να ενσωματώσετε χάρτες εικόνας από την πλευρά του πελάτη με JavaScript. Σε έναν συνηθισμένο χάρτη εικόνας από την πλευρά του πελάτη, περιορίζεστε απλώς στη σύνδεση με μια άλλη σελίδα. Εάν θέλετε, μπορείτε να "συνδέσετε" με μια λειτουργία JavaScript και να δώσετε στους χάρτες εικόνων σας ακόμη περισσότερη ευφυΐα. Για παράδειγμα, μπορείτε να δημιουργήσετε έναν πίνακα ελέγχου που επιτρέπει στους χρήστες να κάνουν κλικ με επιτυχία σε ένα κουμπί εικόνας εάν έχουν παρασχεθεί κάποιες πληροφορίες - ας πούμε ένα όνομα χρήστη -.
Η ανατομία ενός χάρτη εικόνας από την πλευρά του πελάτη
Δύο νέες ετικέτες HTML χρησιμοποιούνται για τη δημιουργία χαρτών εικόνας από την πλευρά του πελάτη. Είναι η ετικέτα, η οποία καθορίζει τη δομή του χάρτη και μία ή περισσότερες ετικέτες, οι οποίες ορίζουν τις περιοχές με δυνατότητα κλικ στην εικόνα. Για να δημιουργήσετε τον χάρτη εικόνας, ορίστε μια ετικέτα και δώστε ένα όνομα στη χαρτογράφηση. Η σύνταξη είναι:
Μπορείτε να χρησιμοποιήσετε σχεδόν οποιοδήποτε όνομα για το χάρτη, αλλά θα πρέπει να περιέχει μόνο αλφαβητικούς και αριθμητικούς χαρακτήρες. Η εξαίρεση είναι η υπογράμμιση, αλλά αποφύγετε τη χρήση υπογράμμισης για τον πρώτο χαρακτήρα. Στη συνέχεια, ορίστε μία ή περισσότερες ετικέτες που καθορίζουν τις περιοχές της εικόνας σας. Η ετικέτα παίρνει τη σύνταξη:
Μετά την τελευταία ετικέτα, χρησιμοποιήστε την ετικέτα για να δηλώσετε το τέλος της αντιστοίχισης.
Το τελευταίο στοιχείο είναι η εικόνα που θέλετε να χρησιμοποιήσετε, με αναφορά στον χάρτη περιοχής που έχετε ορίσει προηγουμένως. Χρησιμοποιήστε το πρότυπο ετικέτα, με ένα νέο χαρακτηριστικό USEMAP. Για το χαρακτηριστικό USEMAP, δώστε το όνομα του χάρτη. Ακολουθεί ένα παράδειγμα:
Αυτός ο χάρτης χρησιμοποιεί μια εικόνα που ονομάζεται control.gif. ο Η ετικέτα αναφέρεται στο όνομα του χάρτη, το οποίο είναι #control (σημειώστε το hash πριν από το όνομα). Άλλα χαρακτηριστικά παρέχονται με το
Η ετικέτα δεν έχει περίγραμμα (BORDER = 0) και το πλάτος και το ύψος της εικόνας. Όταν οι χρήστες σας κάνουν κλικ στο πίσω βέλος (που είναι η πρώτη περιοχή που ορίζεται), αποστέλλονται στη σελίδα index.html. Αντίθετα, εάν κάνουν κλικ στο περιεχόμενο "κουμπί" (ορίζεται η δεύτερη περιοχή), μεταφέρονται σε μια σελίδα που ονομάζεται toc.html. Και αν κάνουν κλικ στο βέλος προς τα εμπρός, μεταφέρονται σε μια σελίδα που ονομάζεται backpage.html.
Προσθήκη JavaScript στον έλεγχο χάρτη εικόνων
Το JavaScript μπορεί να χρησιμοποιηθεί για να επεκτείνει τη λειτουργικότητα των χαρτών εικόνας από τον πελάτη. Για πρόσθετη ευελιξία, δώστε το όνομα μιας συνάρτησης JavaScript για το HREF στην ετικέτα. Αντί να μεταβείτε σε κάποια σελίδα, εκτελείται ο κώδικας JavaScript στην οποία μπορείτε να κάνετε ό, τι θέλετε. Το κόλπο: Χρησιμοποιήστε το JavaScript: πρωτόκολλο για τη διεύθυνση URL και ακολουθήστε το με το όνομα της συνάρτησης που θέλετε να χρησιμοποιήσετε.
Για παράδειγμα, ας υποθέσουμε ότι θέλετε οι χρήστες να επιστρέψουν μόνο μία σελίδα στη λίστα ιστορικού όταν κάνουν κλικ στο πίσω βέλος. Μπορείτε να χρησιμοποιήσετε τη μέθοδο window.history.go (-1) για να επιστρέψετε μια σελίδα στη λίστα ιστορικού χρήστη. Μπορείτε είτε να παρέχετε ολόκληρη τη λειτουργία μετά το JavaScript: πρωτόκολλο, είτε να καλέσετε μια συνάρτηση που καθορίζεται από το χρήστη και περιέχει αυτήν την οδηγία. Ακολουθούν και οι δύο μέθοδοι:
ή ...
... και αλλού στο έγγραφο:
συνάρτηση goBack () {window.history.go (-1); } Προσωπικά, προτιμώ την τελευταία μέθοδο, γιατί συχνά πρέπει να παρέχω ορισμένες λειτουργίες JavaScript που θέλω να εκτελέσω. Όμως, μπορείτε να χρησιμοποιήσετε όποια μέθοδο θέλετε και ποια ταιριάζει καλύτερα στην κατάσταση.
Ακολουθεί ένα λειτουργικό παράδειγμα χρήσης χαρτών εικόνας από την πλευρά του πελάτη με JavaScript. Τα κουμπιά εμφανίζουν ένα πλαίσιο ειδοποίησης για να σας δείξουν ότι το JavaScript: URL λειτουργεί πράγματι. Τα κουμπιά εμπρός και πίσω λειτουργούν επίσης - υποθέτοντας ότι έχετε σελίδες εμπρός και πίσω στη λίστα ιστορικού σας. Εάν η λίστα ιστορικού είναι κενή (για παράδειγμα, έχετε φορτώσει το έγγραφο σε νέο παράθυρο) τότε η τρέχουσα σελίδα παραμένει.
Παράδειγμα χάρτη εικόνας από πλευράς πελάτη
Παράδειγμα χάρτης εικόνας πελάτη Συνάρτηση goBack () {alert ("Back"); window.history.go (-1); }
συνάρτηση goForward () {alert ("Forward"); window.history.go (1); }
συνάρτηση toc () {alert ("Πίνακας περιεχομένων"); }
