भाषा ध्वज स्प्राइट्स

विज़ुअल स्टूडियो में एकाधिक भाषा फ़्लैग के लिए स्प्राइट छवि के साथ हाइपरलिंक के लिए CSS और HTML कैसे बनाएं।

परिचय

Ousia CMS का एक प्रमुख हिस्सा बहुभाषी प्रबंधन पक्ष है, जहां सभी आइटम स्वचालित रूप से जेनरेट और लिंक किए जाते हैं। फिर एक नियंत्रण उपलब्ध होता है जो आपको एक ड्रॉपडाउन सूची देता है जो अन्य भाषाओं में सामग्री के लिंक दिखाता है, या भाषा को इंगित करने के लिए ध्वज छवियों के साथ हाइपरलिंक्स का एक सेट (या तो 32px या 64px में) दिखाता है।

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

कृपया बेझिझक स्प्राइट छवि और सीएसएस का उपयोग करें, हालांकि कृपया इसे अपने सर्वर से उपयोग करें! सभी संपत्तियां नीचे डाउनलोड के लिए उपलब्ध हैं।

संरचना बनाना

सबसे पहले, आइए संरचना बनाएं, यदि आप यहां केवल सीएसएस के लिए हैं तो इस चरण को छोड़ दें।

फ्लैग्स नाम का एक नया खाली प्रोजेक्ट बनाएं।
एक नई CSS फ़ाइल जोड़ें, जिसे flags.css कहा जाता है
एक नई HTML फ़ाइल जोड़ें, जिसे flags.htm कहा जाता है
फ्लैगस्प्राइट_32_22.png नामक एक मौजूदा आइटम जोड़ें
एक मौजूदा आइटम जोड़ें, जिसे फ्लैगस्प्राइट_64_45.png . कहा जाता है

अब हमारे पास वे सभी संपत्तियां हैं जिनकी हमें आवश्यकता है, तो चलिए flags.css फ़ाइल खोलते हैं (यदि यह पहले से नहीं है), और निम्नलिखित CSS को कॉपी करें।

CSS

body a{margin:10px;float:left;}/*22 high by 32 wide*/.ouFlgCS32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px   -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgDE32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px  -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgEN32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px  -0px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgES32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgFR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgHI32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -22px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgIT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPL32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgPT32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -44px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgRU32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-0px  -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgTR32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-32px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}.ouFlgZH32{background-image:url('/FlagSprite_32_22.png');height:22px;width:32px;display:block;background-position:-64px -66px;box-shadow:0px 0px 1px #000;border-radius:6px;}/*44 high by 64 wide*/.ouFlgCS64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px     -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgDE64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px    -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgEN64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px   -0px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgES64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px    -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgFR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px   -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgHI64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px  -46px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgIT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px    -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPL64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px   -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgPT64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px  -91px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgRU64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-0px   -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgTR64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-64px  -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}.ouFlgZH64{background-image:url('/FlagSprite_64_45.png');height:44px;width:64px;display:block;background-position:-128px -136px;box-shadow:0px 0px 2px #000;border-radius:12px;}

संरचना बनाना

इसने जो किया है वह छवि की 32x22 और 64x44 पिक्सेल किस्मों के लिए 12 अलग-अलग सीएसएस वर्ग बनाए गए हैं। प्रत्येक वर्ग के भीतर हमने प्रासंगिक पृष्ठभूमि-छवि, प्रासंगिक ऊंचाई और चौड़ाई, और प्रदर्शन शैली को अवरुद्ध करने के लिए सेट किया है।

सबसे महत्वपूर्ण हिस्सा वह है जहां स्थिति बदली जाती है, जो तब केवल छवि के प्रासंगिक अनुभाग को प्रदर्शित करती है, जैसा कि नीचे ड्रॉपडाउन पर दिखाया गया है।

अतिरिक्त सीएसएस इसका समर्थन करने वाले ब्राउज़र के लिए एक बॉक्स-छाया और सीमा-त्रिज्या डालता है।

आगे हम परीक्षण पृष्ठ के लिंक जोड़ेंगे, इसलिए नीचे दिए गए html को फ़्लैग्स.htm में कॉपी करें

HTML

<div>32 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS32"></a><a href="/Ousia.css" class="ouFlgDE32"></a><a href="/Ousia.css" class="ouFlgEN32"></a><a href="/Ousia.css" class="ouFlgES32"></a><a href="/Ousia.css" class="ouFlgFR32"></a><a href="/Ousia.css" class="ouFlgHI32"></a><a href="/Ousia.css" class="ouFlgIT32"></a><a href="/Ousia.css" class="ouFlgPL32"></a><a href="/Ousia.css" class="ouFlgPT32"></a><a href="/Ousia.css" class="ouFlgRU32"></a><a href="/Ousia.css" class="ouFlgTR32"></a><a href="/Ousia.css" class="ouFlgZH32"></a></div><div style="clear:both"><div>64 Pixels Wide</div><a href="/Ousia.css" class="ouFlgCS64"></a><a href="/Ousia.css" class="ouFlgDE64"></a><a href="/Ousia.css" class="ouFlgEN64"></a><a href="/Ousia.css" class="ouFlgES64"></a><a href="/Ousia.css" class="ouFlgFR64"></a><a href="/Ousia.css" class="ouFlgHI64"></a><a href="/Ousia.css" class="ouFlgIT64"></a><a href="/Ousia.css" class="ouFlgPL64"></a><a href="/Ousia.css" class="ouFlgPT64"></a><a href="/Ousia.css" class="ouFlgRU64"></a><a href="/Ousia.css" class="ouFlgTR64"></a><a href="/Ousia.css" class="ouFlgZH64"></a></div>

Debug flags.htm in your browser and you should have 24 separate flags.

क्लेटाबेस द्वारा वेबसाइट डिजाइन

यह कोड का एक भाग है जिसे Ousia सामग्री प्रबंधन प्रणाली कोड से संशोधित किया गया है, जो बाजार पर सबसे तेज और सबसे अनुकूलित प्रणालियों में से एक है, जो हमारी वेबसाइट डिजाइन सेवाओं का हिस्सा है।

ये लगभग £500 से शुरू होने वाली साइटों के साथ उपलब्ध हैं।

अधिक: उत्तरदायी और तेज। सामग्री प्रबंधन प्रणाली के साथ वेब विकास, डिजाइन और होस्टिंग