Αυτή η τεχνική JavaScript μπορεί να χρησιμοποιηθεί για πολλά εφέ, συμπεριλαμβανομένων συμβουλών εργαλείων και χαρτών εικόνων.
Οι διαδραστικοί ιστότοποι μπορούν να προσφέρουν μια πιο ελκυστική εμπειρία στους χρήστες. Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να κάνετε έναν ιστότοπο πιο διαδραστικό, όπως η προσθήκη κινούμενων εικόνων, συμβουλών εργαλείων ή άλλων επιπλέον εφέ.
Ορισμένοι ιστότοποι εμφανίζουν επίσης πληροφορίες όταν ο χρήστης τοποθετεί το δείκτη του ποντικιού πάνω από ένα στοιχείο στη σελίδα. Αυτό περιλαμβάνει χάρτες ή άλλα οπτικά δεδομένα που επιτρέπουν στο χρήστη να τοποθετήσει το δείκτη του ποντικιού πάνω από την εικόνα για να προβάλει ένα σημείο δεδομένων χρησιμοποιώντας μια επεξήγηση εργαλείου.
Μπορείτε να επιτύχετε αυτό το αποτέλεσμα χρησιμοποιώντας HTML, CSS και JavaScript χρησιμοποιώντας ορισμένες τεχνικές CSS και έννοιες JavaScript DOM.
Οι εικόνες μπορούν να είναι ένας χρήσιμος τρόπος για να μεταφέρετε πληροφορίες με οπτικά ελκυστικό τρόπο σε μια ιστοσελίδα. Είναι επίσης χρήσιμα για την προσθήκη άλλων ελκυστικών εφέ όπως α απλή συλλογή εικόνων.
Μπορείτε να προσθέσετε μια επεξήγηση εργαλείου πάνω από μια εικόνα σε HTML χρησιμοποιώντας CSS και JavaScript.
Ο κώδικας που χρησιμοποιείται σε αυτό το έργο είναι διαθέσιμος σε αυτό Αποθετήριο GitHub με άδεια MIT.
- Σε ένα νέο αρχείο που ονομάζεται index.html, προσθέστε τη βασική δομή ενός αρχείου HTML:
html>
<html>
<κεφάλι>
<τίτλος>Παράδειγμα επεξήγησης εργαλείου εικόναςτίτλος>
κεφάλι>
<σώμα>σώμα>
html> - Μέσα στην ετικέτα σώματος, προσθέστε ένα κοντέινερ. Αυτό το div θα περιλαμβάνει τόσο την εικόνα όσο και τα στοιχεία συμβουλής εργαλείου:
<divτάξη="δοχείο">div> - Μέσα στο κοντέινερ, προσθέστε μια εικόνα. Βεβαιωθείτε ότι μια εικόνα με αντίστοιχο όνομα αρχείου βρίσκεται στον ίδιο φάκελο με το αρχείο HTML:
<imgsrc="image.jpg"τάξη="εικόνα"ύψος="420"πλάτος="840"alt="Η εικόνα σου"> - Κάτω από την εικόνα, προσθέστε ένα div για να αντιπροσωπεύσετε την επεξήγηση εργαλείου:
<divτάξη="επεξήγηση εργαλείου">div> - Στην ετικέτα κεφαλιού, προσθέστε μια ετικέτα στυλ. Μέσα στην ετικέτα στυλ, προσθέστε λίγο στυλ για το κοντέινερ εικόνας και την επεξήγηση εργαλείου:
<στυλ>
.δοχείο {
θέση: συγγενής;
απεικόνιση: ενσωματωμένο μπλοκ;
}
.επεξήγηση εργαλείου {
θέση: απόλυτος;
αριστερά: 0;
απεικόνιση: κανένας;
υλικό παραγεμίσματος: 5px;
χρώμα του φόντου: #000;
χρώμα: #fff;
μέγεθος γραμματοσειράς: 12px;
}
στυλ> - Δημιουργήστε μια νέα ετικέτα σεναρίου στο κάτω μέρος της ετικέτας σώματος:
<σώμα>
Το περιεχόμενο της ιστοσελίδας σας εδώ<γραφή>
γραφή>
σώμα> - Μέσα στην ετικέτα σεναρίου, χρησιμοποιήστε τον επιλογέα DOM λειτουργία, querySelector, για να λάβετε τα στοιχεία HTML της εικόνας και την επεξήγηση εργαλείου:
συνθ εικόνα = έγγραφο.querySelector('.εικόνα');
συνθ συμβουλή εργαλείου = έγγραφο.querySelector('.tooltip'); - Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για το το ποντίκι Εκδήλωση. Αυτή η λειτουργία θα εκτελεστεί όταν τοποθετείτε το ποντίκι πάνω από την εικόνα. Όταν συμβεί αυτό, η επεξήγηση εργαλείου θα εμφανιστεί στην οθόνη:
image.addEventListener('πάνω του ποντικιού', () => {
tooltip.style.display = 'ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ';
}); - Προσθέστε ένα πρόγραμμα ακρόασης συμβάντων για το ποντίκι Εκδήλωση. Αυτή η λειτουργία θα εκτελεστεί όταν το ποντίκι φύγει από την εικόνα. Όταν συμβεί αυτό, η επεξήγηση εργαλείου θα εξαφανιστεί από την οθόνη:
image.addEventListener('αποβολή του ποντικιού', () => {
tooltip.style.display = 'κανένας';
}); - Ανοίξτε το αρχείο index.html σε οποιοδήποτε πρόγραμμα περιήγησης και τοποθετήστε το δείκτη του ποντικιού πάνω από την εικόνα για να προβάλετε την επεξήγηση εργαλείου:
Πώς να υπολογίσετε και να εμφανίσετε τις συντεταγμένες των εικονοστοιχείων X και Y της εικόνας
Τώρα που η επεξήγηση εργαλείου είναι ορατή στη σελίδα, αλλάξτε τη θέση της και το κείμενό της για να εμφανιστούν οι συντεταγμένες X και Y του ποντικιού.
- Αλλάξτε το στυλ CSS της επεξήγησης εργαλείου, έτσι ώστε η επεξήγηση εργαλείου να μην είναι ορατή πριν τοποθετήσετε το δείκτη του ποντικιού πάνω από την εικόνα. Αυτό σας εμποδίζει να δείτε την επεξήγηση εργαλείου στο κάτω μέρος της εικόνας πριν μεταβείτε στη θέση του δρομέα:
.επεξήγηση εργαλείου {
θέση: απόλυτος;
μπλουζα: -30 εικονοστοιχεία;
αριστερά: 0;
απεικόνιση: κανένας;
υλικό παραγεμίσματος: 5px;
χρώμα του φόντου: #000;
χρώμα: #fff;
μέγεθος γραμματοσειράς: 12px;
} - Μέσα στην ετικέτα σεναρίου, προσθέστε ένα άλλο πρόγραμμα ακρόασης συμβάντων, για να το ακούσετε κίνηση του ποντικιού Εκδήλωση. Αυτή η λειτουργία θα εκτελείται συνεχώς κάθε φορά που το ποντίκι σας τοποθετείται πάνω από ένα νέο pixel. Προσθέστε την παράμετρο συμβάντος, η οποία θα εισάγει πληροφορίες σχετικά με το κίνηση του ποντικιού συμβάν στη συνάρτηση. Αυτές οι πληροφορίες περιλαμβάνουν τις συντεταγμένες εικόνας όπου βρίσκεται το ποντίκι σε εκείνο το σημείο:
image.addEventListener("μετακίνηση του ποντικιού", (ε) => {}); - Χρησιμοποιώντας το συμβάν, αλλάξτε την οριζόντια θέση της επεξήγησης εργαλείου χρησιμοποιώντας την αριστερή ιδιότητα CSS. Κάθε φορά που κινείται το ποντίκι, αυτό θα ενημερώνει την τιμή ώστε να ταιριάζει με τις συντεταγμένες X του δρομέα, που είναι αποθηκευμένες στο πελάτηΧ μεταβλητός:
tooltip.style.left = e.clientX + 'px'; - Αλλάξτε την κατακόρυφη θέση της επεξήγησης εργαλείου χρησιμοποιώντας την επάνω ιδιότητα CSS. ClientY αντιπροσωπεύει τις συντεταγμένες y του ποντικιού. ο μετατόπιση Ύψος Η ιδιότητα περιλαμβάνει οποιαδήποτε πρόσθετη επένδυση ή περιγράμματα μέσα στην επεξήγηση εργαλείου. Εφόσον δεν θέλετε την επεξήγηση εργαλείου απευθείας εκεί που βρίσκεται ο δρομέας, μπορείτε να αφαιρέσετε επιπλέον 10 εικονοστοιχεία από τη θέση:
tooltip.style.top = e.clientY - tooltip.offsetΎψος - 10 + 'px'; - Αλλάξτε το περιεχόμενο κειμένου της επεξήγησης εργαλείου για να εμφανίσετε τις συντεταγμένες:
tooltip.textContent = `Χ: ${e.offsetX}, Υ: ${e.offsetY}`; - Ανοίξτε το αρχείο index.html σε οποιοδήποτε πρόγραμμα περιήγησης και τοποθετήστε το δείκτη του ποντικιού πάνω από την εικόνα για να προβάλετε την ενημερωμένη συμβουλή εργαλείου:
Προσθήκη εφέ στη διαδραστική ιστοσελίδα σας
Τώρα καταλαβαίνετε πώς μπορείτε να προσθέσετε μια διαδραστική επεξήγηση εργαλείου πάνω από μια εικόνα στην ιστοσελίδα σας. Μπορείτε να συνεχίσετε να προάγετε τις δεξιότητές σας σε HTML και CSS πειραματιζόμενοι με άλλα ενδιαφέροντα εφέ HTML.
