सीएसएस के साथ एक छवि मानचित्र कैसे बनाएं

विकल्पों

मुझे कुछ 'जीकी' चाहिए था इसलिए मैंने 'पॉकेट' ग्राफिक पर फैसला किया जिसमें मेरे ब्लॉग के लिए सभी सदस्यता विधियां हैं।

वेब 1.0 के दिनों में, इस तरह के लिंक का एक संग्रह आपकी छवि को प्रत्येक ग्राफिक पर लिंक के साथ जोड़कर बनाया जा सकता है, फिर इसे एक मेज के साथ एक साथ वापस सिलाई करने की कोशिश की जा सकती है। यह भी एक का उपयोग करके पूरा किया जा सकता है छवि मानचित्र लेकिन आमतौर पर समन्वय प्रणाली को बनाने के लिए एक उपकरण की आवश्यकता होती है। कैस्केडिंग स्टाइल शीट्स का उपयोग करना, यह एक टन आसान बनाता है ... कोई स्प्लिसिंग छवियां और आपके समन्वय प्रणाली का निर्माण करने के लिए कोई उपकरण खोजने की कोशिश नहीं कर रहा है!

  1. अपनी छवि बनाएं जिसका आप उपयोग करना चाहते हैं। आप नीचे इस ग्राफिक का उपयोग कर सकते हैं (राइट-क्लिक करें और डाउनलोड करने के लिए सहेजें):
    ऑप्शंस
  2. अपनी छवि को उस निर्देशिका में अपलोड करें जो आपके सीएसएस से संबंधित है। वर्डप्रेस में, इसे अपनी थीम डायरेक्टरी में इमेज फोल्डर में रखकर सबसे आसान किया जा सकता है।
  3. अपना एचटीएमएल जोड़ें। यह अच्छा और सरल है... एक div जिसमें तीन लिंक हैं:
    > div id = "subscribe">> a id = "rss" href = "[आपका फ़ीड लिंक]" शीर्षक = "सदस्यता लें आरएसएस के साथ" >> अवधि वर्ग = "छिपाना"> RSS> / अवधि >> / a>> एक आईडी = "ईमेल" href = "[आपका ईमेल सदस्यता लिंक]" शीर्षक = "ईमेल की सदस्यता लें" >> अवधि वर्ग = "छिपाना"> ईमेल> / अवधि >> / a>> एक आईडी = "मोबाइल" href = "[आपका मोबाइल लिंक]" शीर्षक = "मोबाइल संस्करण देखें" >> अवधि वर्ग = "छिपाएँ"> मोबाइल> / अवधि >> / a>> / div>
    
  4. अपनी कैस्केडिंग स्टाइल शीट संपादित करें। आप 6 अलग-अलग शैलियों को जोड़ेंगे। समग्र div के लिए 1 शैली, 1 टैग के लिए तो यह किसी भी पाठ सजावट को प्रदर्शित नहीं करता है, पाठ को छिपाने के लिए 1 शैली (प्रत्येक लिंक के लिए उपयोग की गई) और 1 शैली विनिर्देशन:
    #subscribe {/ * बैकग्राउंड इमेज ब्लॉक * / डिस्प्ले: ब्लॉक; चौड़ाई: 215 पीएक्स; ऊंचाई: 60 पीएक्स; पृष्ठभूमि: url (छवियाँ / options.png) कोई दोहराना नहीं; मार्जिन-टॉप: 0px; } #subscribe a {टेक्स्ट-डेकोरेशन: कोई नहीं; } .हाइड {दृश्यता: छिपी; } #rss {/ * RSS लिंक * / फ्लोट: बाएं; स्थिति: पूर्ण; चौड़ाई: 50 पीएक्स; ऊंचाई: 50 पीएक्स; मार्जिन-बाएं: 20 पीएक्स; मार्जिन-टॉप: 5 पीएक्स; } #email {/ * ईमेल लिंक * / फ्लोट: बाएं; स्थिति: पूर्ण; चौड़ाई: 50 पीएक्स; ऊंचाई: 50 पीएक्स; मार्जिन-वाम: 70 पीएक्स; मार्जिन-टॉप: 5 पीएक्स; } # मोबाइल {/ * मोबाइल लिंक * / फ्लोट: बाएं; स्थिति: पूर्ण; चौड़ाई: 50 पीएक्स; ऊंचाई: 50 पीएक्स; मार्जिन-वाम: 130px; मार्जिन-टॉप: 5 पीएक्स; }

स्थिति अच्छी और सरल है ... एक ऊंचाई और चौड़ाई जोड़ें और फिर छवि के बाईं ओर से बाईं ओर मार्जिन सेट करें, और छवि के ऊपर की ओर से शीर्ष मार्जिन!

यह "कैसे करें" पोस्ट में प्रवेश के लिए है Geeks सेक्सी परम "कैसे" प्रतियोगिता के लिए कर रहे हैं! एक नोट, यह सच है कि एक छवि मानचित्र में बहुत अधिक जटिल बहुभुज हो सकते हैं, लेकिन मैंने वास्तव में बहुत से ऐसे स्थान नहीं देखे हैं जहां यह होना चाहिए। मैंने देखा कि गीक्स पर बड़े राजभाषा 'RSS की छवि सेक्सी साइडबार है... यह एक लिंक के लिए एक अच्छी जगह है। 😉

की सलाह से बेहतर पहुंच के लिए 10/3/2007 को अद्यतन किया गया फिल!

प्रायोजक: यदि आप वेब डिज़ाइन के लिए एक नौसिखिया हैं, तो अपनी खुद की वेब साइट बनाएँ एचटीएमएल और सीएसएस का उपयोग कर सही तरीका, 2 डी संस्करण एक होना चाहिए। इस आसान-से-अनुसरण गाइड में आप सीखेंगे कि वेब साइट को सर्वोत्तम तरीके से कैसे बनाया जा सकता है - इसे स्वयं करके!

41 टिप्पणियाँ

  1. 1

    डौग, कि एक अच्छी विधि की तरह लगता है, लेकिन यह बहुत दुर्गम है।

    स्क्रीन रीडर के साथ एक अंधे उपयोगकर्ता पर विचार करें, केवल पाठ वाला ब्राउज़र या बिना सीएसएस या छवियों के साइट पर जाने वाला कोई भी उपयोगकर्ता सक्षम है (जैसे, शायद एक मोबाइल उपयोगकर्ता जो आपके मोबाइल फ्रेंडली साइट के लिंक की तलाश में है)। उनमें से कोई भी उन तीन लिंक के बारे में नहीं जानता होगा क्योंकि उनके पास कोई पाठ नहीं है। यदि छवियां बंद हैं, तो उपयोगकर्ता यह वर्णन करने के लिए कि क्या एक पृष्ठभूमि छवि है, यह वर्णन करने के लिए ऑल्ट टेक्स्ट नहीं देखेगा।

    बेहतर होगा कि छवियों को टुकड़ा करें, उन्हें लिंक करें, उन्हें एक सूची में डालें और उन्हें एक दूसरे के बगल में फ्लोट करें। या यहां तक ​​कि लिंक के लिए पाठ का उपयोग करें और मानक छवि प्रतिस्थापन तकनीक का उपयोग करके पाठ को बदलें। यह सुविधाजनक लगता है, लेकिन यह मानक ग्राफ़िकल ब्राउज़र का उपयोग नहीं करने वालों के लिए चीजों को बहुत कठिन / असंभव बनाता है।

    • 2

      मैं धीरे से (चूंकि आपके पास अधिक विशेषज्ञता है) असहमत, फिल, प्रत्येक लिंक का एक शीर्षक है इसलिए प्रत्येक पूरी तरह से सुलभ है। पाठ शीर्षक पढ़ना JAWS जैसे पहुंच अनुप्रयोगों की क्षमता है। यहाँ एक है लिंक में शीर्षकों पर अच्छी पोस्ट और पहुंच पर इसका प्रभाव.

      • 3

        डौग,

        JAWS डिफ़ॉल्ट रूप से लिंक शीर्षक नहीं पढ़ता है, लेकिन आप सही हैं, यह कर सकता है। आप लिंक शीर्षक की तलाश में क्यों होंगे यदि आप नहीं जानते थे कि यह वहां था, और यहां तक ​​कि अगर आप थे, तो निश्चित रूप से यह एक प्रयोज्य मुद्दे पर गिरता है जिसका अर्थ है कि आप कम एबल्ड उपयोगकर्ताओं को अपनी साइट का उपयोग करने का एक दूसरा दर अनुभव दे रहे हैं।

        पाठ ब्राउज़रों के लिए, आप जिस लेख की ओर इशारा करते हैं, वह लिंक्स आपको लिंक शीर्षक की एक सूची लाने की भी अनुमति देता है, लेकिन मेरी बात यह है कि अगर आपको नहीं पता था कि वहाँ एक लिंक था, क्योंकि पहली जगह में कोई पाठ नहीं था , आप शीर्षक पाठ की तलाश क्यों करेंगे?

        अंत में, लिंक शीर्षक विशेषताएँ अभी भी किसी ऐसे चित्र के बिना ब्राउज़ नहीं होंगी जो सीएसएस सक्षम या बिना सक्षम किए हुए है।

        तो हाँ, शीर्षक के साथ लिंक बिना उन लोगों से बेहतर हैं, लेकिन इस मामले में यह केवल सीमांत है।

        यही कारण है कि एक छवि का उपयोग किया जा रहा है, ताकि पूरी तरह से पाठ पढ़ा जा सके, या छवि प्रतिस्थापन हो, ताकि पाठ वहाँ हो, एक अधिक सुरक्षित, अधिक सुलभ और अधिक उपयोगी विकल्प हो।

        • 4

          अच्छी जानकारी, फिल। मैं इसे पाठ के साथ बढ़ाने का प्रयास करने जा रहा हूं, लेकिन बस पाठ को छिपाऊंगा - जिस तरह से JAWS जैसे सुलभ उत्पाद लिंक पाठ को पढ़ेगा और यदि सीएसएस या छवियां अक्षम होती हैं तो पाठ प्रदर्शित किया जाएगा।

          मैं असहमत हूं कि एकमात्र सुलभ समाधान एक छवि को लिंक के साथ रखना होगा, हालांकि।

  2. 5
  3. 8

    मैंने इसे चुरा लिया। वहाँ, मैंने कहा।

    डौग, ग्राफिक्स शानदार हैं और कोडिंग इतना अविश्वसनीय रूप से सरल है कि यह मुझे डराता है (सीएसएस के साथ खेल रहा है और अब मैं अंत में "गेट" प्राप्त करता हूं)।

    मेरी जरूरतों को पूरा करने के लिए कोड को ट्विक किया गया, यह पता लगाया गया कि HTML बिट को कहां छोड़ा जाए और स्पष्ट रूप से यह बहुत अच्छा लगता है और मेरे साइडबार के उस शीर्ष को साफ कर दिया है जो मुझे INSANE चला रहा है।

    मुझे अभी आपको उस कॉफी को खरीदना पड़ सकता है!

  4. 10

    डौग,

    मैं एक उदाहरण के रूप में अपने अनुभव का उपयोग करते हुए, एक असंतुष्ट आवाज बनने जा रहा हूं। मुझे हमारे ईमेल याद हैं जब मेरे घर का ईमेल बदल गया था और आपने नोट किया था कि मुझे बस अपने नए के साथ चयन करना है। मुझे स्वीकार करना होगा कि आपकी साइट पर एक बार फिर से चुनने के लिए नई सुविधा "खोज" करने की आपके पास एक बिल्ली थी। इसका एक कारण यह था कि मूल लिंक थोड़ा अधिक पारंपरिक था और मैंने अस्पष्ट रूप से उस एक को याद किया। अन्य इसलिए था क्योंकि बग़ल में आधा लिफ़ाफ़ा बस शुरू में मुझे एक लिफ़ाफ़े की तरह नहीं दिखता था। लगभग 5 या अधिक मिनटों के बाद मैंने हर चित्र पर अपना माउस रोल करना शुरू किया और जब "ईमेल के साथ सदस्यता लें" शीर्षक दिखाया, तो मुझे पता था कि मैं व्यवसाय में था। मेरे दिमाग ने यह भी पता लगा लिया कि लिंक तस्वीर क्या थी।

    लेकिन, कम से कम मेरे लिए, एक बग़ल में लिफाफा सिर्फ मेरे लिए सहज नहीं था, क्योंकि ईमेल सूचनाओं की सदस्यता के लिए जगह के रूप में। और (क्योंकि मुझे हमेशा कुछ अच्छा करने के लिए कहा गया था) मैं ऊपर दिए गए फिल से सहमत हूं; विधि वास्तव में सरल है और पूरी वस्तु महान काम करती है। मुझे लगता है कि यह आपके डिजाइन टूल ने आपको 3 वर्गों के लिए सटीक आयाम देने में मदद की; क्या यह सही धारणा है? मुझे ऐसा मानना ​​है, क्योंकि अगर मेरे पास होता है, तो कहते हैं, एक 400 पिक्सेल चौड़ी छवि मुझे सही सेटिंग्स आदि जानने की आवश्यकता होगी।

    • 11

      बॉब,

      यह बहुत अच्छी प्रतिक्रिया है! मैंने उस छवि पर थोड़ा ध्यान दिया जो सीधे लोगों को थोड़ा बेहतर बनाने में मदद करती है।

      धन्यवाद!
      डॉग

  5. 12
    • 13

      विलियम,

      ऐसा लगता है कि आपके टिप्पणी वर्ग के नाम और साइडबार ग्राफिक में वर्ग नामों के बीच संघर्ष हो सकता है। संघर्ष को साफ़ करने के लिए आप उन्हें अलग नाम दे सकते हैं। मुझे पता है अगर आप एक हाथ की जरूरत है!

      डॉग

  6. 14

    सब कुछ एफएफ और आईई दोनों में काम करने लगता है ... मुझे लगता है कि आप उस साइट पर रहे होंगे जब मैं एक प्लगइन को ट्विक करने की कोशिश कर रहा था जो कि काफी काम नहीं कर रहा था ... in

  7. 15

    बहुत बढ़िया! मैं इसे साझा करने वाला हूं। साझा करने के लिए धन्यवाद। मुझे वह शीर्षक पसंद है, दोस्त! मैं सीखना चाहता हूं कि आपने ऐसा कैसे किया you

    चीयर्स!

  8. 16
  9. 17
  10. 18

    अच्छा तरीका है, लेकिन मुझे स्थलाकृतिक मानचित्र के लिए कुछ चाहिए, इसलिए मैं आयत क्षेत्रों का उपयोग नहीं कर सकता ... मुझे लगता है कि मुझे निर्देशांक के साथ पुराने शैली के इमेजमैप का उपयोग करना होगा, लेकिन मैं शायद थोड़ा गहरा खोदूंगा ...

  11. 19

    इस जानकारी के लिए धन्यवाद, डौग। मैं यहां पहले भी आया था और सोचता था कि आपने यह कैसे किया। हम अपनी पोस्ट के बाद सम्मिलित करने के लिए एक नक्शा बनाना चाहते थे, और अब हमारे पास साधन हैं, हम इसे कर सकते हैं। वाहवाही!

  12. 20

    हम वर्डप्रेस में काम करते समय "HTML को कैसे गिराते हैं"। मेरे पास सीएसएस और php पेज हैं।

  13. 21

    हाय डौग,
    मैंने एक पिछली टिप्पणी छोड़ दी लेकिन मुझे एहसास हुआ कि मैंने शायद ही अपनी दुविधा में कोई अंतर्दृष्टि प्रदान की है। हम यहाँ अपना ऑनलाइन सिटकॉम लॉन्च करने में मदद करने के लिए एक वर्डप्रेस थीम को अपना रहे हैं:

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

    अब, आप देखेंगे कि हमारे पास शीर्ष पर एक नेविगेशन बैनर है, एक छवि जिसे हमने मानचित्रित करने का इरादा किया है, जैसा कि हम पहले दर्जनों बार कर चुके हैं। / Palmforehad। हम में से कोई भी वास्तव में सीएसएस को नहीं समझता है, लेकिन हम पर्याप्त रूप से चारों ओर ठोकर खाते हैं और इस तरह अब तक इस बिंदु पर ठीक किया है। दर्जनों में से केवल एक में आपका लेख प्रदान किया गया कि सीएसएस में इमेजमैपिंग का आसानी से उपयोग करने के बारे में वास्तविक जानकारी है। मैंने आपके दिशा-निर्देशों के अनुसार स्टाइलशीट ईट कर दी है, लेकिन पता नहीं है कि एचटीएमएल को कहां रखा जाए। आपने कहा था कि "अपना html जोड़ें ... यह अच्छा और सरल है" और फिर मैंने सोचा कि क्योंकि मैंने सोचा था कि "" मेरे लिए पर्याप्त सरल नहीं है! " मुझे नहीं पता था कि मैं विषय संपादक में इनमें से किसी भी php पेज में html जोड़ सकता हूं। क्या मैं HTML को हेडर में रखता हूँ? मुख्य सूचकांक टेम्पलेट? कार्य? मुझे लगता है कि सभी वर्डप्रेस उपयोगकर्ताओं के पास डैशबोर्ड संपादक में अपनी थीम को संपादित करने का विकल्प है, जो कार्यक्षमता में बहुत सार्वभौमिक लगता है। यदि आप सुझाव दे सकते हैं कि html कहां रखा जाए, तो मैं अपने नौसैनिक बार के लिए oru कोड को अनुकूलित करना पसंद करूंगा।

    समुदाय के साथ अपने ज्ञान को साझा करने के लिए धन्यवाद। मुझे आपको कॉफ़ी मिलने की ख़ुशी है।

    • 22

      हाय फय!

      आपके ब्लॉग की थीम की सभी फाइलें संपादन के लिए व्यवस्थापक पैनल के माध्यम से उपलब्ध हैं। यदि आप प्रस्तुति और उसके बाद थीम संपादक पर क्लिक करते हैं, तो आपको दाईं ओर अपनी फ़ाइलों की सूची और बाईं ओर एक संपादक देखने में सक्षम होना चाहिए।

      यदि आप इसे अपने साइडबार में रखना चाहते हैं, तो संभवतः आपके पास साइडबार पेज है। इसे संपादित करने के लिए क्लिक करें और फिर पृष्ठ के भीतर दिए गए HTML को उस स्थान पर रखें जहाँ आप इसे पसंद करेंगे।

      एक नोट: स्टाइलशीट एडिट आपके पेज के सापेक्ष है, इसलिए आपको चित्र को थीम इमेजेस डायरेक्टरी में अपलोड करने की आवश्यकता होगी, यदि आप इसे संदर्भित कर रहे हैं जैसा कि आप अपने थीम के अन्य चित्रों में करेंगे।

      उम्मीद है कि मदद करता है!

    • 23

      चरण,
      मैं आज इस साइट पर आया था और आप के समान दुविधा थी। मैं हेडर इमेज में एक इमेज मैप भी जोड़ना चाहता था। थोड़ी देर तक उसके साथ खेलने के बाद, मैं सही हो गया। शीर्ष लेख HTML फ़ाइल में रखो। मैंने इसे और के बीच रखा। निश्चित नहीं है कि आपके टेम्प्लेट में वह सटीक कोडिंग है, लेकिन शीर्ष पर उसके साथ हैडर फ़ाइल में रखें और आप उसका पता लगा लेंगे।
      -
      पॉल

  14. 24

    शीघ्र प्रतिक्रिया के लिए शुक्रिया!

    नहीं, मैं इसे तेह साइडबार में नहीं चाहता था, यह पृष्ठ के शीर्ष पर है (आप मेरे द्वारा दिए गए लिंक में देख सकते हैं- गुलाबी नेविगेशन बार जो प्रतियोगी कहता है, शो ect के बारे में ..)

    मैं पूरी सुबह डैशबोर्ड में काम कर रहा हूं, दुर्भाग्य से, मुझे यकीन नहीं है कि मैं किस फाइल को html रखूं, जैसा कि ऊपर कहा गया है, मेरे पास कई हैं, शीर्ष लेख। पीपीपी, मुख्य सूचकांक। एफपीपी, फ़ंक्शंस। एफपीपी, फूटर। एफपी। मुझे यकीन नहीं है कि html कोड कहां डालना है। (आपके द्वारा प्रदान किया गया पहला भाग, मैंने अपनी स्टाइलशीट में पहले से ही शेष सम्मिलित कर लिया है) वेबसाइट पर मेरी छवि वहां है, सब कुछ जाने के लिए तैयार है, मुझे बस यह जानने की जरूरत है कि एडैपिंग के लिए कोड के html भाग को कहां जोड़ा जाए।

    अपने समय के लिए बहुत बहुत धन्यवाद और एक नौसिखिया से सवाल क्षेत्ररक्षण।

    फय

  15. 25

    ... या हो सकता है कि कोई व्यक्ति टिप्पणी में पोस्ट कर सकता है कि हम कोड के HTML भाग को किस फ़ाइल में रखते हैं। एक सज्जन ने कुछ पोस्ट तक कहा कि उन्हें यह समझ में आया। मैं इतना भाग्यशाली नहीं रहा।

    फेलेन

  16. 26
  17. 27

    मेरे पास वर्डप्रेस में क्लिक करने योग्य छवि मानचित्र को एम्बेड करने का एक तरीका खोजने का समय है, क्योंकि यह HTML मानचित्र टैग को स्ट्रिप्स करता है। आपका तरीका काम करेगा लेकिन स्पष्ट रूप से इस तरह से पेंच के लिए अमेरिका का एक नक्शा जटिल है। मैं हार गया हूं।

    मदद।

    ऐसा लगता है कि फ्लैश ही मेरा एकमात्र विकल्प है?

    • 28

      डेव,

      यदि आप छवि को अपने टेम्पलेट में रखते हैं, तो आप ठीक हो जाएंगे। यदि आप छवि मानचित्र को वास्तविक सामग्री में रखते हैं, तो आप फ़िल्टर समस्याओं में भाग सकते हैं। जिस तरह से मैंने इसके चारों ओर काम किया है वह भयानक है, लेकिन कई बार मैंने एक आइफ्रेम का उपयोग किया है।

      डॉग

  18. 29

    हाय,

    ऐसा लगता है कि छवि मानचित्र और लिंक दो अलग-अलग चीजें हैं, वे एक साथ काम नहीं करते हैं जैसे कि HTML में एक छवि मानचित्र कैसे होता है

    जब मैं इमेज मैप के लिए बैकग्राउंड पोजिशनिंग (सेंटर लेफ्ट) शामिल करता हूं, तो लिंक्स की पोजिशनिंग फॉलो नहीं होती है।

    किसी भी तरह से यह चारों ओर पाने के लिए? मैं बहुत शौकिया हूँ। धन्यवाद।

  19. 31

    क्या एक समान दृष्टिकोण का उपयोग बड़े और अधिक जटिल छवि मानचित्र के लिए किया जाएगा जैसे मैं उपयोग करने की कोशिश कर रहा हूं?

    यदि आप मेरी साइट देखते हैं, तो बाईं ओर के लिंक पर क्लिक करें और आपको वह छवि दिखाई देगी जिसका उपयोग मैं एक छवि मानचित्र (पाठ वर्णमाला के तहत) के रूप में करने की कोशिश कर रहा हूं।

    मूल रूप से, इस सूची के प्रत्येक अनुभाग पर पत्र द्वारा जाने के लिए छवि का उपयोग करने की कोशिश कर रहा है।

    संयोग से, मैंने जीआईएमपी के साथ एक नक्शा बनाने में 20 मिनट का समय बिताया, और फिर WP मैप टैग को हटा देता है, इसलिए मुझे आपकी साइट मिल गई।

    हालाँकि, फ़्लैश का उपयोग करने पर विचार कर सकता है

    धन्यवाद।

  20. 33

    मैं वर्तमान में अपने स्वयं के सामान के साथ एक टेम्पलेट लेआउट और संपादन का उपयोग कर रहा हूं। मैं एक छवि मानचित्र जोड़ना चाहता हूं, लेकिन मुझे यकीन नहीं है कि इसे सीएसएस में कहां रखा जाए। मैं जिस छवि का मानचित्र बनाना चाहता हूँ, वह हेडर भाग में है।

  21. 34

    हैलो, मैंने अपनी वेबसाइट जूमला पर बनाई है ... मैं अपने पेज के लोगो को घर से जोड़ने के लिए इस विधि का उपयोग करना चाहता हूं, मुझे बताया गया है कि आप यह जूमला के साथ नहीं कर सकते, लेकिन यह लेख मुझे आशा देता है! ईमेल के माध्यम से मदद की बहुत सराहना की जाएगी ... धन्यवाद

  22. 35

    हाय डौग - मैं एक जटिल सीएसएस-आधारित छवि मानचित्र बना रहा हूं जिसमें दूरस्थ रोलओवर भी है (इस मामले में, पाठ पृष्ठ पर कहीं और प्रदर्शित होता है जब आप छवि हॉटस्पॉट में से किसी एक पर मंडराते हैं)। किसी भी तरह से, मैं उस शोध के दौरान आपके उदाहरण पर आया हूं ... और मैंने सोचा कि मैं निम्नलिखित इनपुट साझा करूंगा:

    1. एक्सेसिबिलिटी के लिए, आपको दृश्यता का उपयोग नहीं करना चाहिए: कोई भी (या डिस्प्ले: कोई भी यदि आप उस पर विचार नहीं करते हैं) तो यहां पाठ को छिपाने के लिए, दृश्यता के साथ एक तत्व के रूप में: छिपी स्क्रीन पाठकों द्वारा नहीं पढ़ी जाएगी (जो कल्पना का पालन करते हैं) ।

    इसके बजाय, अधिक मजबूत छवि प्रतिस्थापन तकनीक का उपयोग करें। मैं या तो फार्क पद्धति या गिल्डर / लेविन का सुझाव देता हूं - वे मूल तकनीकों को खोजने के लिए Google के लिए बेहतर दस्तावेज नाम हैं। मैं G / L को पसंद करता हूं क्योंकि यह CSS सक्षम के साथ भी काम करता है लेकिन चित्र बंद हैं।

    2. जबकि मुझे यह टूटता हुआ नहीं दिखाई दे रहा है (FF3 का उपयोग करते हुए), तो आपके कार्यान्वयन की स्थिति में अंतर्निहित जोखिम भी हैं। एक बिल्कुल तैनात तत्व अपने निकटतम तैनात माता-पिता के सापेक्ष तैनात है। मूल रूप से, आप स्पष्ट रूप से # स्थिति के लिए 'स्थिति: सापेक्ष' लागू करके एक स्थिति संदर्भ सेट करना चाहते हैं। फिर बच्चों (पोस्ट किए गए लिंक) को उस अभिभावक के भीतर तैनात किया जा सकता है। यह विधि ब्राउज़रों में अधिक विश्वसनीय परिणाम सुनिश्चित करने में मदद करती है।

    इसके अलावा, आपको उस स्थिति को संभालने के लिए मार्जिन के बजाय "टॉप: x" और "लेफ्ट: x" (जहां x को ऑफ़सेट मान है, px में कहें) की स्थिति घोषणाओं का उपयोग करना चाहिए। फिर, मुझे यह जरूरी नहीं है कि आप इसे वैसे ही तोड़ दें, लेकिन शीर्ष और बाएं इसके लिए हैं, इसलिए उनका उपयोग क्यों नहीं करते? इसके अलावा, आप एक ही तत्व पर सेट किए गए फ़्लोट्स और मार्जिन प्राप्त करते हैं, जो विशिष्ट परिस्थितियों में IE6 में "डबल मार्जिन" बग का कारण बनता है (क्या आपने वहां यह परीक्षण किया है?) - जब कोई फिक्स होता है, तो आप पूरी तरह से शीर्ष का उपयोग करके उस मुद्दे से बचते हैं और इस मामले में स्थिति के लिए मार्जिन के बजाय छोड़ दिया।

    3. अंत में, व्यर्थ तलाक के बजाय इन कड़ियों के लिए शब्दार्थ ध्वनि रहित सूची का उपयोग क्यों न करें?

    पर ड्रोनिंग के लिए क्षमा करें ... मैं सिर्फ साझा करना पसंद करता हूं, b / c मैं अनुभव से जानता हूं कि वांछित परिणाम प्राप्त करने के लिए सीएसएस का उपयोग करने के कई अलग-अलग तरीके हैं, लेकिन कुछ तरीके निश्चित रूप से दूसरों की तुलना में बेहतर (अधिक विश्वसनीय, क्रॉस-ब्राउज़र) काम करते हैं । HTH।

  23. 36
  24. 37

    धन्यवाद, डौग! कई ट्यूटोरियल की समीक्षा करने के बाद, मैं अपनी पत्नी के कूपन ब्लॉग पर इसे लागू कर रहा हूं, http://www.SavingWithAmy.com/। यह अब तक का सबसे आसान और सबसे सीधा फॉरवर्ड ट्यूटोरियल है जिसे मैंने फॉलो किया और लागू किया।

  25. 38

    बहुत बहुत धन्यवाद!! आपके निर्देशों ने मुझे काम के लिए बचाया ... मैं वेब विकास के लिए नया हूं, और मुझे अपनी पहली बड़ी परियोजना के माध्यम से नुकसान उठाना पड़ा। मैंने इसे बनाया ... ग्राहक वास्तव में खुश है, परमानंद और इसलिए मैं हूं!

  26. 39

    नमस्कार, इसे पोस्ट करने के लिए बहुत बहुत धन्यवाद! वर्षों बाद और यह अभी भी मदद कर रहा है ... अच्छा! मैं अपनी छवि मानचित्र को सही स्थान से जोड़ने के लिए संघर्ष कर रहा हूं। मेरे पास एक बैनर है और मैं आपके द्वारा आपूर्ति किए गए कोड का उपयोग करके लिंक के बैनर के ऊपरी दाहिने हिस्से में सामाजिक आइकन चाहता हूं। यह बहुत अच्छा काम करता है, सिवाय इसके कि मैं कुछ गलत कर रहा हूं क्योंकि मेरे लिंक स्क्रीन के सबसे ऊपरी बाईं ओर दिखाई दे रहे हैं, सामाजिक आइकन पर नहीं, बल्कि लोगो के ऊपर। मुझे यकीन है कि यह कुछ सरल है, लेकिन मैं अभी इसका पता नहीं लगा सकता। सोचा था कि यदि आपके पास कोई अंतर्दृष्टि है तो मैं इसे यहाँ साझा करूँगा। इसे पोस्ट करने के लिए फिर से धन्यवाद!

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.