सीएसएस के माध्यम से अनुपलब्ध छवियों को बदलें?

Question

क्या मानक टूटी हुई छवि को सीएसएस के माध्यम से बदलना या किसी अन्य तकनीक का उपयोग करना संभव है? मेरी सभी छवियां एक ही आकार के हैं और मेरी पारदर्शिता है।

मैं सभी छवियों को एक div की पृष्ठभूमि के साथ रैप करने के लिए कोशिश की है:

<div class="no_broken"> 
    <img src="http://www.web.com/found.gif"/> 
</div> 

<div class="no_broken"> 
    <img src="http://www.web.com/notfound.gif"/> 
</div> 

सीएसएस:

div.no_broken { 
    background-image: url(standard.gif); 
} 

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

लेकिन यह एक दूसरे के ऊपर पर दो छवियों को प्रदर्शित करेगा अगर आईएमजी पारदर्शी है।

Answer 1

यह सीएसएस के बिना काम करता है:

<img src="some.jpg" onerror="this.src='alternative.jpg';"> 

यह भी काम करने के लिए जब जावास्क्रिप्ट अक्षम किया गया है लगता है।

Answer 2

जहाँ तक मुझे पता है, कोई सीएसएस संपत्ति नहीं है जो टूटी हुई छवियों के प्रदर्शन को नियंत्रित करती है। शायद ब्राउज़र-विशिष्ट गुण हैं? पृष्ठ पर छवियों को फिर से चलाने के लिए आपको जावास्क्रिप्ट का सहारा लेना पड़ सकता है, और यदि वे टूटे हुए हैं तो उनके स्रोत को प्रतिस्थापित कर सकते हैं।

Answer 3

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

मैंने छवियों को पूर्ण नहीं होने पर छवियों को प्रतिस्थापित करने के लिए इसका उपयोग किया है।

मुझे नहीं पता कि यह आपकी स्थिति से संबंधित है या नहीं, निश्चित रूप से काम नहीं करेगा जब पथ है लेकिन पथ पर छवि नहीं है।

Answer 4

यह कोड जावास्क्रिप्ट है और केवल जेएस सक्षम होने पर ही काम करेगा। अजीब बात यह भी काम करती है अगर आईई में फ़ाइल को स्थानीय मशीन से एक्सेस किया जाता है (फ़ाइल: /// के साथ)। जब पृष्ठ http के साथ पहुंचाया जाता है तो यह जेएस के बिना काम नहीं करेगा।

Answer 5

यदि आप मिश्रण में कुछ जावास्क्रिप्ट जोड़ना चाहते हैं, तो यह छवि त्रुटियों का पता लगाने के लिए jQuery के साथ अच्छी तरह से काम करना चाहिए और टूटी हुई छवियों में कुछ प्रकार की त्रुटि स्थिति सीएसएस क्लास जोड़ना चाहिए।

$(document).ready(function() { 
    $('.no_broken img').error(function() { 
     $(this).addClass('broken'); 
    }); 
}); 

और फिर अपने सीएसएस में आप हो सकता था कुछ

तरह

div.no_broken, div.no_broken img { 
    width: 32px; 
    height: 32px; 
    display: block; 
} 

div.no_broken img.broken { 
    background-image: url(standard.gif); 
    content:""; 
} 

Answer 6

सोचा मैं एक जवाब में kmoser से टिप्पणी पैकेज चाहते हैं। आतंक हैंडलर को साफ़ करना एक अच्छा विचार है क्योंकि लूप संभव है।

जावास्क्रिप्ट

function epic(c) { 
    c.onerror=''; 
    c.src='alternative.jpg'; 
}; 

एचटीएमएल

<img src='some.jpg' onerror='epic(this)'> 

हम twiends पर अब हमारे सभी छवि टैग में इस महाकाव्य समारोह छोड़ें, जैसा कि हम सामाजिक प्रोफ़ाइल छवियों है कि सभी में कुछ बिंदु पर समाप्त हो का भार में खींच भविष्य।