html IMG टैग के साथ स्प्राइट्स का उपयोग करना?




css css-sprites (5)

स्प्राइट्स का उपयोग करने का मतलब यह नहीं है कि आपको उन्हें सीएसएस पृष्ठभूमि में परिभाषित करने की आवश्यकता है। आप IMG टैग स्प्राइट्स का उपयोग भी कर सकते हैं, ऐसा करने के लिए आपको मूल रूप से अपनी छवि को ट्रिम करने की आवश्यकता है। उस तकनीक को समझाने वाले दो अच्छे लेख हैं:

http://tjkdesign.com/articles/how-to_use_sprites_with_my_Image_Replacement_technique.asp

http://www.artzstudio.com/2010/04/img-sprites-high-contrast/

CSS और IMG दोनों तरीकों के अपने फायदे हैं, इसलिए आपको यह पता लगाने की जरूरत है कि कौन सा आपको बेहतर लगता है।

मैं समझता हूं कि स्प्राइट का उपयोग कैसे किया जाता है, हालांकि, IMG टैग के लिए "src" विशेषता आवश्यक नहीं है? मैं हमेशा एक स्पैन या अन्य टैग का उपयोग कर सकता हूं और पृष्ठभूमि / चौड़ाई / आदि सेट कर सकता हूं लेकिन यह शब्दार्थ रूप से सही नहीं होगा।

मूल रूप से, मैं IMG टैग के लिए SRC को छोड़ना चाहता हूं और केवल स्प्राइट्स का उपयोग करना चाहता हूं, लेकिन HTML के बारे में चिंतित हूं कि इसकी वजह से तकनीकी रूप से मान्य नहीं है। धन्यवाद।


आप अपने विकल्पों पर फिर से विचार करके इसे हल करें।

आप display:block; साथ एक परिभाषित क्षेत्र बनाते display:block; साथ display:block; या <div> और overflow hidden; उपयोग करें overflow hidden; अतिप्रवाह और position:relative; को छिपाने के लिए position:relative;

तब आप अपनी <img> छवि स्प्राइट को पूरी तरह से तैनात करते हैं, जो कि माता-पिता को तैनात करने के बाद से संभव है।

फिर उपयोग करें :hover स्थिति बदलने के लिए छवि पर :hover

अब आपका स्प्रिट एक img टैग पर आधारित है, जिससे आप अपने alt टेक्स्ट का उपयोग कर सकते हैं।

निम्नलिखित उदाहरण एक दूसरे के ऊपर आइकन के दो संस्करणों के साथ एक फेसबुक स्प्राइट पर आधारित है, प्रत्येक 50px से 50px, छवि की कुल ऊंचाई 100px:

<!DOCTYPE html>
<html>
<head>
<style>
.icon {
    display:block;
    position:relative;
    width:50px;
    height:50px;
    border:1px solid red;
    overflow:hidden;
}
#fb {
    position:absolute;
    top:0;
    left:0;
}
#fb:hover {
    position:absolute;
    top:-50px;
    left:0;
}
</style>
</head>

<body>
<a href="https://facebook.com" class="icon" title="Facebook">
<img src="sprite-facebook.png" id="fb" width="50" height="100" alt="Facebook">
</a>
</body>
</html>

मैं हमेशा एक स्पैन या अन्य टैग का उपयोग कर सकता हूं और पृष्ठभूमि / चौड़ाई / आदि सेट कर सकता हूं लेकिन यह शब्दार्थ रूप से सही नहीं होगा

वास्तव में एक स्पैन या डिव की पृष्ठभूमि सेट करने के लिए सीएसएस का उपयोग करने के बारे में कुछ भी गलत नहीं है। यह वास्तव में गलत रूप से एक छवि से src को छोड़ना गलत होगा, क्योंकि यह टैग का पूरा बिंदु है। मानकों में ऐसा कुछ भी नहीं है जिसमें कहा गया हो कि आपको एक स्पैन के अंदर टेक्स्ट डालना है। सिंथेटिक रूप से बोलना, एक तत्व पर पृष्ठभूमि को संशोधित करना इसे करने का सबसे "सही" तरीका होगा।

यहाँ W3C पर img टैग पर रेफरी है: http://www.w3.org/TR/html401/struct/objects.html#h-13.2

और थोड़ा अतिरिक्त पढ़ना: http://www.w3.org/TR/html4/struct/global.html#h-7.5.3

ये तत्व कंटेंट को इनलाइन (SPAN) या ब्लॉक-लेवल (DIV) के रूप में परिभाषित करते हैं, लेकिन कंटेंट पर कोई अन्य प्रेजेंटेशनल मुहावर नहीं लगाते हैं। इस प्रकार, लेखक इन सामग्रियों का उपयोग स्टाइल शीट, लैंग विशेषता आदि के साथ मिलकर HTML को अपनी आवश्यकताओं और स्वाद के लिए कर सकते हैं।


शब्दार्थ शुद्धता के बारे में:

जब किसी छवि का शब्दार्थ अर्थ होता है, तो इसे सामग्री माना जाता है, बिना स्प्राइट के, IMG टैग का उपयोग करें , और एक सही ढंग से सेट ALT।

जब एक छवि सिर्फ सजावट होती है, जैसे कि एक बॉक्स की पृष्ठभूमि, एक बटन की पृष्ठभूमि, एक मेनू विकल्प की पृष्ठभूमि, आदि, इसका कोई अर्थ नहीं है, इसलिए आप इसे केवल एक SPAN, DIV, आदि की पृष्ठभूमि के रूप में उपयोग कर सकते हैं। सीएसएस से। आप इस मामले में स्प्राइट्स का उपयोग कर सकते हैं।


मैं src के लिए 1x1 पारदर्शी gif (तथाकथित स्पेसर) का उपयोग करता हूं। फिर उस छवि के लिए पृष्ठभूमि छवि को इसी बीजी स्थिति के साथ सेट करें। इस तरह से आप स्प्राइट की गति का उपयोग कर रहे हैं और अपने कोड के शब्दार्थ को बनाए रख रहे हैं (आप अभी भी पूरी विशेषता का उपयोग कर सकते हैं)







html-validation