χάρτες CSS εικόνας επιτρέπει στους προγραμματιστές να τοποθετήσει τα καυτά σημεία μέσα σε εικόνες που περιέχουν συνδέσμους σε άλλες ιστοσελίδες . Για παράδειγμα , ένα καυτό σημείο μπορεί να τοποθετηθεί γύρω από το πρόσωπο ενός ατόμου στην εικόνα που περιέχει ένα σύνδεσμο προς την προσωπική τους ιστοσελίδα . Όταν ένας χρήστης τοποθετεί το ποντίκι πάνω πρόσωπο του ατόμου ένα σχήμα θα εμφανιστεί που σκιαγραφεί το ζεστό χώρο spot . Η δημιουργία ενός χάρτη εικόνας CSS περιλαμβάνει την κλήση μιας εικόνας σε html και στη συνέχεια τη δημιουργία τους αντίστοιχους κωδικούς CSS ανάμεσα στις ετικέτες html . Αυτό το άρθρο δείχνει πώς να κάνει ένα χάρτη της εικόνας από τα μάτια και τη μύτη για ένα πορτρέτο Ginevra de Benci ζωγραφισμένα από τον Λεονάρντο ντα Βίντσι . Τα πράγματα που θα χρειαστείτε
επεξεργαστή κειμένου , όπως το Notepad , Emacs , ConTextMozilla , Explorer ή κάποιο άλλο πρόγραμμα περιήγησης
Η Εμφάνιση Περισσότερες οδηγίες
Είναι Χαρτογράφηση Out
Η 1
Δημιουργία δύο συνδεδεμένες σελίδες web . Αυτό το παράδειγμα δημιουργεί ένα για τα μάτια και ένα για τη μύτη. Η σελίδα μάτια θα διαβάσει « Αυτά είναι τα μάτια" και η σελίδα της μύτης θα διαβάσει "Αυτή είναι η μύτη . " Ο παρακάτω html δείγμα δημιουργεί το δύο είναι τα μάτια ! < /h1 > < /body> < /html > 2
Δημιουργήστε τις ετικέτες HTML για την εικόνα . Ανοίξτε ένα κενό έγγραφο και να χρησιμοποιήσετε τον ακόλουθο κώδικα για να καλέσετε την εικόνα από τον κατάλογο . Θα πρέπει να αλλάξετε το όνομα και τις προδιαγραφές μέγεθος της εικόνας σας :
Προσώπου < /title> <div id="image"> < img src = " da_vinci . jpg " width = " 550 " height = " 425 " /> < /div > < /body> < /html > εικόνων <br> 3 <p> Προσθέστε τις συνδέσεις με τις εικόνες μέσα σε ένα μη διατεταγμένη λίστα tag . Για να προσθέσετε τις συνδέσεις τοποθετήστε τον ακόλουθο κώδικα μεταξύ της εικόνας και των ετικετών κατηγορία: <ul> <li class="d_eyes"> <a href="eyes.html" title = "eyes"> μάτια < /a> <li class="d_nose"> <a href="nose.html" title = "nose"> μύτη < /a> < /li > < /ul > μπορεί να θέλετε να αλλάξετε το ονόματα κλάσης για να ταιριάξει καλύτερα την εικόνα σας . <br> Η 4 <p> Δημιουργήστε το CSS για την εικόνα . Ο ακόλουθος κώδικας θα πρέπει να πάει μεταξύ της < /title> και < /head> tags της html εγγράφου : <style type="text/css"> # { image width : 550px ? Ύψος: 425px ? Θέση : σχετική? } # image ul {margin : 0 ? padding : 0 ? list-style : none ? } μπορείτε να ρυθμίσετε τις τιμές όπως θέλετε . Για παράδειγμα , μπορείτε να επιλέξετε να προσθέσετε μια τιμή για να γεμίσει την εικόνα . Βεβαιωθείτε ότι η αναφορά ταιριάζει με το όνομα div . Σε αυτό το παράδειγμα είναι «εικόνα ». Μπορείτε να επιλέξετε ένα άλλο σαν "εικόνα" ή " pic " κλπ. <br> 5 <p> Δημιουργήστε το CSS για τις συνδέσεις . Ο ακόλουθος κώδικας CSS τοποθετεί δύο ξεχωριστά hot spots πάνω από τα μάτια και τη μύτη : # image d_eyes ένα . { Θέση : απόλυτη? Width : 100px ? Ύψος: 20px ? Text-indent : - 1000em ? } . # Image d_nose ένα { position: absolute ? width : 40px ? ύψος: 20px ? text-indent : . - 1000em ? } # image d_eyes ένα { top: 140px ? αριστερά : 270px ? } # image d_nose ένα { top: . 180px ? αριστερά : 300px ? } # την εικόνα ενός : hover {border : 5px solid # 000000 } < /style > φυσικά , προδιαγραφές σας θα διαφέρουν ως εικόνα σας θα είναι διαφορετική . Ένα γραφικό λογισμικό σχεδιασμού , όπως της Coral Draw ή το Adobe Photoshop μπορεί να παράσχει πληροφορίες για τη θέση pixel . Ωστόσο , μπορείτε πάντα να βρείτε τη σωστή θέση δοκιμής και λάθους , καθώς και . Αποθηκεύστε τη σελίδα στον ίδιο κατάλογο με τα άλλα δύο αρχεία . <br> Η 6 <p> Δοκιμάστε το χάρτη εικόνας . Πηγαίνετε στον κατάλογο όπου είναι αποθηκευμένα τα αρχεία και κάντε διπλό κλικ στο αρχείο html , όπου εμφανίζεται η εικόνα . Θα πρέπει να δείτε την εικόνα σας στο πρόγραμμα περιήγησης . Εκτελέστε το ποντίκι σας, όπου τοποθετούνταν τα hotspots . Θα δείτε να εμφανίζεται ένα μαύρο πλαίσιο . Κάντε κλικ μέσα στο πλαίσιο και οι σελίδες αναφοράς θα ανοίξει . <br> Η <br> εικόνων
<div class="grad2"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3314932315682382" crossorigin="anonymous"></script> <!-- 221021-2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3314932315682382" data-ad-slot="8094203668" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div>
<div class="grad3"></div>
</div>
<div class="fanyedads">
<ul>
<li>Τελευταίο άρθρο: <a class='LinkPrevArticle' href='http://www.221021.com/Programming/computer-programming-languages/88794.html' >Ποιος ήταν ο πρώτος προγραμματιστής ηλεκτρονικών υπολογιστών </a>
<li>Επόμενο άρθρο: <a class='LinkNextArticle' href='http://www.221021.com/Programming/computer-programming-languages/88796.html' >Πώς να υπολογίσετε Μέτρο </a>
</ul>
</div>
</div>
<div class="woqinimaderwr24">
<div class="dibud23">
<div class="biaotidas51">
<div class="biaotidas511"><h3>Συναφής σύστασή</h3></div>
<div class="butudasda"></div>
</div>
</div>
<div class="dibud24">
<div class="dibud241">
<ul class="dsa31das">
<li><a href="http://www.221021.com/Programming/computer-programming-languages/87041.html" target="_blank">Πώς να προσθέσετε ένα UDID σε Παροχή Αρχείο </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/342738.html" target="_blank">Πώς λέτε να έχετε έναν υπολογιστή στα γαλλικά; </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88190.html" target="_blank">Πώς για την εμφάνιση του παραθύρου διαλόγου Εκτύπωση </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/87770.html" target="_blank">Πώς να επιστρέψει μια errorlevel σε VBS </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88499.html" target="_blank">Πώς να μετατρέψετε EXE με τον Κώδικα </a></li>
</ul>
</div>
<div class="dibud242">
<div class="biaotidasoidasf3h4">
<h4>Τελευταία άρθρα</h4>
<div class="nibushihenzaiyi"></div>
</div>
<ul class="thydghaodennrend">
<li><a href="http://www.221021.com/Programming/computer-programming-languages/86547.html" target="_blank">Πώς να Μετατροπή κειμένου σε CSV με KiXtart </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/342738.html" target="_blank">Πώς λέτε να έχετε έναν υπολογιστή στα γαλλικά; </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/312414.html" target="_blank">Από ποια γλώσσα προέρχεται η λέξη υπολογιστή; </a></li>
<li><a href="http://www.221021.com/Programming/computer-programming-languages/88255.html" target="_blank">Πώς να κάνει Movie αναθεώρηση λογισμικού </a></li>
</ul>
</div>
</div>
</div>
<div class="dibudaohnagdsaw">
<div class="das342sd"><p>Πνευματικά δικαιώματα © <a href="http://www.221021.com/" target="_blank" >Γνώση Υπολογιστών</a> Όλα τα δικαιώματα κατοχυρωμένα </p></div>
</div>
</div>
</body>
</html>