Πώς να δημιουργήσετε έναν χάρτη εικόνας με CSS

επιλογές

Ήθελα κάτι «geeky», γι 'αυτό αποφάσισα ένα γραφικό τσέπης που να περιέχει όλες τις μεθόδους συνδρομής για το blog μου.

Στις μέρες του Web 1.0, μια συλλογή από συνδέσμους όπως αυτό θα μπορούσε να δημιουργηθεί συγκολλώντας την εικόνα σας με συνδέσμους σε κάθε γραφικό και, στη συνέχεια, προσπαθώντας να τα ράψετε όλα μαζί με έναν πίνακα. Θα μπορούσε επίσης να επιτευχθεί χρησιμοποιώντας ένα χάρτης εικόνας αλλά αυτό συνήθως απαιτεί ένα εργαλείο για τη δημιουργία του συστήματος συντεταγμένων. Η χρήση Cascading Style Sheets το καθιστά ευκολότερο… χωρίς εικόνες συναρμολόγησης και χωρίς προσπάθεια εύρεσης εργαλείου για τη δημιουργία του συστήματος συντεταγμένων σας!

  1. Δημιουργήστε την εικόνα σας που θέλετε να χρησιμοποιήσετε. Μπορείτε να χρησιμοποιήσετε αυτό το γραφικό παρακάτω (δεξί κλικ και αποθήκευση για λήψη):
    επιλογές
  2. Ανεβάστε την εικόνα σας σε έναν κατάλογο που σχετίζεται με το CSS σας. Στο WordPress, αυτό μπορεί να γίνει ευκολότερα τοποθετώντας το σε ένα φάκελο εικόνων στον κατάλογο θεμάτων σας.
  3. Προσθέστε το HTML σας. Είναι ωραίο και απλό… ένα div με τρεις συνδέσμους σε αυτό:
    > div id = "subscribe">> a id = "rss" href = "[ο σύνδεσμός τροφοδοσίας σας]" title = "Εγγραφή με RSS" >> span class = "hide"> RSS> / span >> / a>> a id = "email" href = "[ο σύνδεσμος εγγραφής στο email σας]" title = "Εγγραφή με email" >> span class = "hide"> Email> / span >> / a>> a id = "mobile" href = "[your mobile link]" title = "View Mobile Version" >> span class = "hide"> Κινητό> / span >> / a>> / div>
    
  4. Επεξεργαστείτε το Cascading Style Sheet. Θα προσθέσετε 6 διαφορετικά στυλ. 1 στυλ για το συνολικό div, 1 για την ετικέτα, ώστε να μην εμφανίζει διακόσμηση κειμένου, 1 στυλ για απόκρυψη του κειμένου (χρησιμοποιείται για προσβασιμότητα) και 1 προδιαγραφή στυλ για καθέναν από τους συνδέσμους:
    #subscribe {/ * block εικόνας φόντου * / display: block; πλάτος: 215 εικονοστοιχεία; ύψος: 60px; φόντο: url (images / options.png) χωρίς επανάληψη; margin-top: 0px; } #subscribe a {text-decoration: none; }. απόκρυψη {ορατότητα: κρυφό; } #rss {/ * RSS Link * / float: αριστερά; θέση: απόλυτη; πλάτος: 50 εικονοστοιχεία; ύψος: 50px; περιθώριο αριστερά: 20 εικονοστοιχεία; margin-top: 5px; } #email {/ * Σύνδεσμος email * / float: αριστερά; θέση: απόλυτη; πλάτος: 50 εικονοστοιχεία; ύψος: 50px; περιθώριο αριστερά: 70 εικονοστοιχεία; margin-top: 5px; } #mobile {/ * Mobile Link * / float: αριστερά; θέση: απόλυτη; πλάτος: 50 εικονοστοιχεία; ύψος: 50px; περιθώριο αριστερά: 130 εικονοστοιχεία; margin-top: 5px; }

Η τοποθέτηση είναι ωραία και απλή… προσθέστε ένα ύψος και πλάτος και, στη συνέχεια, ορίστε το αριστερό περιθώριο από την αριστερή πλευρά της εικόνας και το άνω περιθώριο από την επάνω πλευρά της εικόνας!

Αυτή η ανάρτηση «Πώς να» είναι για είσοδο στο Οι Geeks είναι σέξι απόλυτος διαγωνισμός «Πώς να»! Μια σημείωση, είναι αλήθεια ότι ένας χάρτης εικόνων μπορεί να έχει πολύ πιο πολύπλοκα πολύγωνα, αλλά δεν έχω δει πραγματικά πολλά μέρη όπου αυτό πρέπει να έχει. Παρατήρησα ότι η μεγάλη εικόνα RSS στο Geeks είναι σέξι πλευρική μπάρα ... αυτό είναι ένα καλό μέρος για έναν σύνδεσμο. 😉

ΕΝΗΜΕΡΩΣΗ 10/3/2007 για καλύτερη προσβασιμότητα με τη συμβουλή του Φιλ!

Ανάδοχος: Εάν είστε αρχάριος στο σχεδιασμό ιστοσελίδων, τότε δημιουργήστε τον δικό σας ιστότοπο Ο σωστός τρόπος με χρήση HTML & CSS, η 2η έκδοση είναι απαραίτητη. Σε αυτόν τον εύχρηστο οδηγό θα μάθετε πώς να δημιουργείτε έναν ιστότοπο με τον καλύτερο δυνατό τρόπο - κάνοντας τον μόνοι σας!

41 Σχόλια

  1. 1

    Doug, αυτό φαίνεται σαν μια ωραία μέθοδος, αλλά είναι πολύ απρόσιτη.

    Σκεφτείτε έναν τυφλό χρήστη με πρόγραμμα ανάγνωσης οθόνης, έναν χρήστη με πρόγραμμα περιήγησης μόνο κειμένου ή οποιονδήποτε επισκέπτεται τον ιστότοπο χωρίς ενεργοποιημένο CSS ή Εικόνες (όπως ίσως ένας χρήστης κινητής τηλεφωνίας που ψάχνει τον σύνδεσμο προς τον ιστότοπό σας για κινητά). Κανένας από αυτούς δεν θα γνωρίζει αυτούς τους τρεις συνδέσμους επειδή δεν έχουν κείμενο. Εάν οι εικόνες είναι απενεργοποιημένες, ο χρήστης δεν θα βλέπει καν κείμενο alt για να περιγράψει τι θα ήταν εκεί, επειδή είναι μια εικόνα φόντου.

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

    • 2

      Θα διαφωνούσα απαλά (δεδομένου ότι έχετε περισσότερη εξειδίκευση), Φιλ, κάθε ένας από τους συνδέσμους έχει έναν τίτλο, ώστε ο καθένας να είναι πλήρως προσβάσιμος. Η ανάγνωση τίτλων κειμένου είναι μια δυνατότητα εφαρμογών προσβασιμότητας, όπως το JAWS. Εδώ είναι καλή ανάρτηση σε τίτλους σε συνδέσμους και η επίδρασή της στην προσβασιμότητα.

      • 3

        Ντουγκ,

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

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

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

        Ναι, οι σύνδεσμοι με τίτλους είναι καλύτεροι από αυτούς χωρίς, αλλά σε αυτήν την περίπτωση είναι μόνο οριακοί.

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

        • 4

          Καλές πληροφορίες, Phil. Θα προσπαθήσω να το βελτιώσω με κείμενο αλλά απλώς να αποκρύψω το κείμενο - με αυτόν τον τρόπο ένα προσβάσιμο προϊόν όπως το JAWS θα διαβάσει το κείμενο του συνδέσμου και το κείμενο θα εμφανιστεί εάν το CSS ή οι Εικόνες είναι απενεργοποιημένες.

          Ωστόσο, διαφωνώ ότι η μόνη προσβάσιμη λύση θα ήταν να βάλετε μια εικόνα με έναν σύνδεσμο.

  2. 5
    • 6
      • 7

        Είναι κάτι που συχνά δεν προσέχουμε, Φιλ! Επίσης, κάνοντας την εφαρμογή σας προσβάσιμη συχνά έχει καλά αποτελέσματα μηχανών αναζήτησης.

        Εκτιμώ πραγματικά την εμπειρία και τα σχόλια!

  3. 8

    Το εκλεψα. Εκεί, το είπα.

    Doug, τα γραφικά είναι φανταστικά και η κωδικοποίηση είναι απίστευτα απλή που με τρομάζει (έπαιζα με CSS και τώρα τελικά «το καταλαβαίνω»).

    Έφτιαξε τον κώδικα για να καλύψει τις ανάγκες μου, κατάλαβα πού να ρίξω το bit HTML και, ειλικρινά, φαίνεται υπέροχο και έχει καθαρίσει την κορυφή της πλαϊνής μπάρας μου που με οδήγησε INSANE.

    Ίσως χρειαστεί να σας αγοράσω ακόμα τον καφέ!

    • 9
  4. 10

    Ντουγκ,

    Θα είμαι μια διαφωνούμενη φωνή, χρησιμοποιώντας την εμπειρία μου ως παράδειγμα. Θυμάμαι τα email μας όταν άλλαξε το email του σπιτιού μου και σημειώσατε ότι έπρεπε απλώς να επιλέξω το νέο μου. Πρέπει να παραδεχτώ ότι είχα αρκετό χρόνο να "ανακαλύψω" τη νέα δυνατότητα στον ιστότοπό σας για να επιλέξω ξανά. Μέρος αυτού ήταν επειδή ο αρχικός σύνδεσμος ήταν λίγο πιο παραδοσιακός και θυμήθηκα αόριστα αυτόν. Ο άλλος ήταν επειδή ο μισός φάκελος στο πλάι δεν έμοιαζε αρχικά με φάκελο. Μετά από περίπου 5 ή περισσότερα λεπτά άρχισα να ρίχνω το ποντίκι μου πάνω σε κάθε εικόνα και όταν εμφανίστηκε ο τίτλος "Εγγραφή με email", τότε ήξερα ότι ήμουν στην επιχείρηση. Ο εγκέφαλός μου κατάλαβε επίσης ποια ήταν η εικόνα συνδέσμου.

    Αλλά, τουλάχιστον για μένα, ένας πλάγιος φάκελος δεν ήταν διαισθητικός για μένα ως το μέρος για να εγγραφώ σε ειδοποιήσεις μέσω email. Και (επειδή μου είπαν να τελειώνω πάντα με κάτι ωραίο) συμφωνώ με τον Phil παραπάνω. η μέθοδος είναι πραγματικά απλή και ολόκληρο το αντικείμενο λειτουργεί τέλεια. Θεωρώ ότι το εργαλείο σχεδιασμού σας βοήθησε να σας δώσει τις ακριβείς διαστάσεις για τις 3 ενότητες. είναι σωστή υπόθεση; Πρέπει να το υποθέσω, γιατί αν είχα, ας πούμε, μια εικόνα πλάτους 400 pixel, θα χρειαζόμουν να γνωρίζω τις σωστές ρυθμίσεις κ.λπ.

    • 11

      Βαρίδι,

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

      Ευχαριστώ!
      Doug

  5. 12
    • 13

      Γουλιέλμος,

      Φαίνεται ότι ενδέχεται να υπάρχει διένεξη μεταξύ των ονομάτων τάξεων σχολίων και των ονομάτων τάξεων στο γραφικό πλευρικής γραμμής. Μπορείτε να τα ονομάσετε διαφορετικά για να επιλύσετε τη διένεξη. Ενημερώστε με αν χρειάζεστε ένα χέρι!

      Doug

  6. 14
  7. 15
  8. 16
  9. 17
  10. 18

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

  11. 19

    Ευχαριστώ για αυτές τις πληροφορίες, Doug. Ήμουν εδώ πριν και αναρωτιόμουν πώς το έκανες. Θέλαμε να δημιουργήσουμε έναν τέτοιο χάρτη για να εισαγάγουμε μετά τις δημοσιεύσεις μας και τώρα που έχουμε τα μέσα, μπορούμε να το κάνουμε. Μπράβο!

  12. 20
  13. 21

    Hi Doug,
    Άφησα ένα προηγούμενο σχόλιο, αλλά συνειδητοποίησα ότι δεν πρότεινα καθόλου καμία εικόνα για το δίλημμα μου. Έχουμε προσαρμόσει ένα θέμα wordpress για να μας βοηθήσει να ξεκινήσουμε την ηλεκτρονική μας κωμική σειρά εδώ:

    http://www.phaylen.com/blog/

    Τώρα, θα δείτε ότι έχουμε ένα banner πλοήγησης στην κορυφή, μια εικόνα που σκοπεύαμε να χαρτογραφήσουμε όπως έχουμε δεκάδες φορές πριν. / παλάμη Κανένας από εμάς δεν είναι πραγματικά ξεκάθαρος CSS, αλλά σκοντάφτουμε αρκετά και μέχρι στιγμής έχουμε κάνει εντάξει μέχρι τώρα. Το άρθρο σας στο ΜΟΝΟ ΕΝΑ από τις δεκάδες που παρέχονται είναι πραγματικές πληροφορίες σχετικά με τον τρόπο χρήσης της απεικόνισης εικόνων στο CSS εύκολα. Έχω δει το φύλλο στυλ σύμφωνα με τις οδηγίες σας, αλλά δεν έχω ιδέα πού να τοποθετήσω το HTML. Το μόνο που είπατε είναι "Προσθέστε το html σας ... Είναι ωραίο και απλό" και μετά τσακώθηκα γιατί σκέφτηκα .. "όχι αρκετά απλό για μένα!" Δεν ήξερα ότι θα μπορούσα να προσθέσω html σε οποιαδήποτε από αυτές τις σελίδες php στο πρόγραμμα επεξεργασίας θεμάτων. Τοποθετώ το html στην κεφαλίδα; Το πρότυπο Κύριο ευρετήριο; Οι λειτουργίες; Υποθέτω ότι όλοι οι χρήστες wordpress έχουν την επιλογή να επεξεργαστούν το θέμα τους στο πρόγραμμα επεξεργασίας ταμπλό, ο οποίος φαίνεται αρκετά καθολικός στη λειτουργικότητα. Εάν μπορούσατε να προτείνετε πού να τοποθετήσετε το html, θα ήθελα πολύ να προσαρμόσω τον κώδικα oru για τη γραμμή πλοήγησης.

    Ευχαριστούμε που μοιραστήκατε τις γνώσεις σας με την κοινότητα. Χαίρομαι που σε παίρνω καφέ.

    • 22

      Γεια Φάι!

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

      Εάν θέλετε αυτό να βρίσκεται στην πλευρική γραμμή σας, πιθανότατα έχετε μια σελίδα πλευρικής γραμμής. Κάντε κλικ για να το επεξεργαστείτε και, στη συνέχεια, τοποθετήστε το HTML που παρέχεται στη σελίδα όπου θέλετε.

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

      Ελπίδα που βοηθά!

    • 23

      Phay,
      Συναντήθηκα σήμερα σε αυτόν τον ιστότοπο και είχα το ίδιο δίλημμα με εσάς. Ήθελα επίσης να προσθέσω έναν χάρτη εικόνας στην εικόνα κεφαλίδας. Αφού έπαιξα για λίγο, το κατάλαβα. Τοποθετήστε το div HTML στο αρχείο header.php. Το έβαλα μεταξύ και. Δεν είστε βέβαιοι εάν το πρότυπό σας έχει αυτήν την ακριβή κωδικοποίηση, αλλά παίξτε μαζί του στο αρχείο header.php και θα το καταλάβετε.
      -
      Παύλος

  14. 24

    Ευχαριστώ για τη γρήγορη απάντηση!

    Όχι, δεν ήθελα να είναι στην πλαϊνή μπάρα, είναι στην κορυφή της σελίδας (μπορείτε να δείτε στον σύνδεσμο που παρείχα - τη ροζ γραμμή πλοήγησης που λέει contant, για την εκπομπή κ.λπ.)

    Δούλευα όλο το πρωί στον ταμπλό, δυστυχώς, δεν είμαι σίγουρος σε ποιο αρχείο τοποθετώ το html, όπως αναφέρεται παραπάνω, έχω πολλά, header.php, main index.php, functions.php, footer.php. Δεν είμαι σίγουρος πού να εισαγάγω τον κώδικα html. (το πρώτο μέρος που παρείχατε, έχω ήδη εισαγάγει το υπόλοιπο στο φύλλο στυλ μου) Έχω την εικόνα μου εκεί στον ιστότοπο, όλα είναι έτοιμα για μετάβαση, απλά πρέπει να ξέρω πού να προσθέσω το τμήμα html του κώδικα για προσαρμογή.

    Ευχαριστώ πολύ για το χρόνο και τις ερωτήσεις από αρχάριους.

    Φέι

  15. 25

    … Ή μήπως κάποιος θα μπορούσε να δημοσιεύσει στα σχόλια σχετικά με το αρχείο στο οποίο τοποθετούμε το τμήμα html του κώδικα. Ένας κύριος μερικές δημοσιεύσεις είπε ότι το κατάλαβε. Δεν ήμουν τόσο τυχερός.

    Phaylen

  16. 26
  17. 27

    Έχω μια στιγμή να βρω έναν τρόπο να ενσωματώσω έναν χάρτη με δυνατότητα κλικ στο wordpress, επειδή αφαιρεί ετικέτες χάρτη html. Ο τρόπος σας θα λειτουργούσε, αλλά ένας χάρτης των ΗΠΑ είναι προφανώς ένας τρόπος για να συγκλίνουμε με αυτόν τον τρόπο. Εχω χαθεί.

    Βοήθεια.

    Φαίνεται ότι το φλας είναι η μόνη μου επιλογή;

    • 28

      Dave,

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

      Doug

  18. 29

    Γεια σας,

    φαίνεται ότι ο χάρτης εικόνων και οι σύνδεσμοι είναι δύο διαφορετικά πράγματα, δεν συνεργάζονται όπως ο χάρτης εικόνων στο html

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

    κάποιος τρόπος να το ξεπεράσεις αυτό; είμαι πολύ ερασιτέχνης. σας ευχαριστώ.

  19. 31

    Θα χρησιμοποιηθεί μια παρόμοια προσέγγιση για έναν μεγαλύτερο και πιο περίπλοκο χάρτη εικόνας όπως προσπαθώ να χρησιμοποιήσω;

    Εάν προβάλετε τον ιστότοπό μου, κάντε κλικ στους συνδέσμους προς τα αριστερά και θα δείτε την εικόνα που προσπαθώ να χρησιμοποιήσω ως χάρτη εικόνας (κάτω από το αλφάβητο κειμένου).

    Βασικά, προσπαθώντας να χρησιμοποιήσετε την Εικόνα για να μεταβείτε σε κάθε ενότητα αυτής της λίστας με γράμμα.

    Προφανώς, πέρασα 20 λεπτά δημιουργώντας έναν χάρτη με το GIMP και έπειτα το WP καταργεί τις ετικέτες χάρτη, έτσι έτσι βρήκα τον ιστότοπό σας.

    Ωστόσο, μπορεί να μελετήσει τη χρήση του Flash

    Ευχαριστώ.

  20. 33

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

  21. 34

    γεια, έφτιαξα τον ιστότοπό μου στο joomla… θέλω να χρησιμοποιήσω αυτήν τη μέθοδο για να κάνω το λογότυπο της σελίδας μου σύνδεσμο προς το σπίτι, μου έχουν πει ότι δεν μπορείτε να το κάνετε αυτό με το joomla, αλλά αυτό το άρθρο μου δίνει ελπίδα! Η βοήθεια μέσω email θα εκτιμηθεί πολύ… ευχαριστώ

  22. 35

    Γεια Doug - Δημιουργώ έναν αρκετά περίπλοκο χάρτη εικόνας που βασίζεται σε css και έχει επίσης απομακρυσμένες ανατροπές (σε αυτήν την περίπτωση, το κείμενο εμφανίζεται αλλού στη σελίδα όταν τοποθετείτε ένα από τα hotspots της εικόνας). Εν πάση περιπτώσει, συνάντησα το παράδειγμά σας εδώ, ενώ το έκανα έρευνα… και σκέφτηκα ότι θα μοιραστώ τα παρακάτω

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

    Αντ 'αυτού, χρησιμοποιήστε μια πιο ισχυρή τεχνική αντικατάστασης εικόνας. Προτείνω είτε τη μέθοδο Phark είτε το Gilder / Levin - αυτά είναι μόνο τα καλύτερα τεκμηριωμένα ονόματα στο google για να βρείτε τις βασικές τεχνικές. Προτιμώ το G / L καθώς λειτουργεί επίσης με ενεργοποιημένο το CSS αλλά οι εικόνες είναι απενεργοποιημένες.

    2. Αν και δεν το βλέπω να σπάει (χρησιμοποιώντας το FF3), η εφαρμογή της τοποθέτησής σας έχει επίσης εγγενείς κινδύνους. Ένα απόλυτα τοποθετημένο στοιχείο τοποθετείται σε σχέση με τον πλησιέστερο γονέα του. Βασικά, θα θέλατε να ορίσετε ρητά ένα περιβάλλον τοποθέτησης εφαρμόζοντας το "position: relatif" στην #subscription. Τότε τα παιδιά (οι τοποθετημένοι σύνδεσμοι) μπορούν να τοποθετηθούν εντός αυτού του γονέα. Αυτή η μέθοδος βοηθά στην εξασφάλιση πιο αξιόπιστων αποτελεσμάτων σε προγράμματα περιήγησης.

    Επίσης, θα πρέπει στη συνέχεια να χρησιμοποιήσετε τις δηλώσεις τοποθέτησης "top: x" και "left: x" (όπου x είναι η τιμή μετατόπισης, ας πούμε σε px) και όχι περιθώρια για να χειριστείτε αυτήν τη θέση. Και πάλι, δεν βλέπω απαραίτητα να σπάει με τον τρόπο που το έχετε, αλλά το πάνω και το αριστερό προορίζονται για αυτό, γιατί να μην τα χρησιμοποιήσετε; Επιπλέον, έχετε ρυθμίσει επιπλέον και περιθώρια στο ίδιο στοιχείο, τα οποία υπό συγκεκριμένες συνθήκες προκαλούν το σφάλμα "διπλού περιθωρίου" στο IE6 (το δοκιμάσατε εκεί;) - ενώ υπάρχει μια επιδιόρθωση, αποφεύγετε το ζήτημα εντελώς χρησιμοποιώντας το top και αριστερά αντί για περιθώρια για τοποθέτηση σε αυτήν την περίπτωση.

    3. Τέλος, γιατί να μην χρησιμοποιήσετε μια σημασιολογικά υγιή λίστα χωρίς παραγγελία για αυτούς τους συνδέσμους αντί για το νόημα div;

    Συγγνώμη για το droning… Απλώς θέλω να μοιραστώ, b / c Ξέρω από την εμπειρία πώς υπάρχουν πολλοί διαφορετικοί τρόποι χρήσης του CSS για να λάβετε το επιθυμητό αποτέλεσμα, αλλά ορισμένοι τρόποι σίγουρα λειτουργούν καλύτερα (πιο αξιόπιστοι, cross-browser) από άλλους . ΗΘ.

  23. 36
  24. 37

    Ευχαριστώ, Doug! Αφού έλεγξα διάφορα μαθήματα, το εφαρμόζω στο κουπόνι του συζύγου μου, http://www.SavingWithAmy.com/. Αυτό είναι μακράν ο ευκολότερος και πιο απλός οδηγός για παρακολούθηση και εφαρμογή που έχω συναντήσει.

  25. 38

    Σε ευχαριστώ πάρα πολύ!! Οι οδηγίες σας με έσωσαν ΩΡΕΣ εργασίας… Είμαι νέος στην ανάπτυξη ιστοσελίδων και μόλις υπέφερα από το πρώτο μεγάλο έργο μου. Το έκανα… ο πελάτης είναι χαρούμενος, εκστατικός στην πραγματικότητα, και έτσι είμαι!

  26. 39

    Γεια σας, σας ευχαριστώ πολύ που δημοσιεύσατε αυτό! Χρόνια αργότερα και εξακολουθεί να βοηθά ... ωραία! Παλεύω να φτιάξω τον χάρτη της εικόνας μου στο σωστό μέρος. Έχω ένα banner και θέλω τα κοινωνικά εικονίδια στην επάνω δεξιά γωνία του banner να συνδεθούν χρησιμοποιώντας τον κωδικό που δώσατε. Λειτουργεί υπέροχα, εκτός από το ότι κάνω κάτι λάθος επειδή οι σύνδεσμοι μου εμφανίζονται στην πάνω αριστερή πλευρά της οθόνης, όχι πάνω από τα κοινωνικά εικονίδια, αλλά πάνω από το λογότυπο. Είμαι βέβαιος ότι είναι κάτι απλό, αλλά δεν μπορώ να το καταλάβω. Σκέφτηκα να το μοιραστώ εδώ σε περίπτωση που έχετε οποιεσδήποτε πληροφορίες. Σας ευχαριστούμε και πάλι για τη δημοσίευση αυτού!

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.