2011-03-22 19 views
66

में किसी छवि के लिए alt text को प्रदर्शित करने के लिए कैसे करें अमान्य स्रोत वाली छवि फ़ायरफ़ॉक्स में एक वैकल्पिक पाठ प्रदर्शित करती है लेकिन क्रोम में नहीं जब तक कि छवि की चौड़ाई समायोजित न हो जाए।क्रोम

<img height="90" width="90" 
    src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" 
    alt="Image Not Found"/> 

किसी छवि के लिए alt टेक्स्ट कैसे प्रदर्शित करें?

+0

क्रोम का कौन सा संस्करण आप उपयोग कर रहे हैं? क्योंकि, http://code.google.com/p/chromium/issues/detail?id=16734 के अनुसार यह तय किया जाना चाहिए था। –

+0

यह अभी भी क्रोम 29 (2+ साल) में एक समस्या प्रतीत होता है! जब तक कि तत्व की चौड़ाई पूरी तरह से Alt टेक्स्ट को एक पंक्ति पर दिखाने के लिए पर्याप्त न हो, तब तक Alt टेक्स्ट प्रदर्शित नहीं होता है !? – MrWhite

+0

... और तत्व को कुछ ऊंचाई की आवश्यकता है। मेरे परीक्षण में कम से कम 44 पीएक्स। – MrWhite

उत्तर

77

यदि मैं सही हूं, तो यह वेबकिट में एक बग है (this के अनुसार)। मुझे यकीन नहीं है कि अगर आप कम कर सकते हैं तो कमजोर जवाब के लिए खेद है।

हालांकि, एक काम है जिसका आप उपयोग कर सकते हैं। यदि आप title अपनी छवि में विशेषता देते हैं (उदा। title="Image Not Found") यह काम करेगा।

+1

मैंने शीर्षक = "xyz" की कोशिश की, लेकिन मेरे लिए काम नहीं किया – Girish

+4

आपको इसमें ऊंचाई और चौड़ाई जोड़ने की आवश्यकता हो सकती है: http://jsfiddle.net/AAyz4/ – Prisoner

+0

@ प्रिज़नर, , नहीं। चौड़ाई और ऊंचाई कोई फर्क नहीं पड़ता। साथ ही, स्रोत खाली या छोड़ा नहीं जाना चाहिए, व्यावहारिक रूप से, यह कभी नहीं होता है (और यही कारण है कि आपका उदाहरण क्यों काम करता है)। –

22

आप title विशेषता का उपयोग कर सकते हैं।

<img height="90" width="90" 
src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" 
alt="Google Images" title="Google Images" /> 
4

शीर्षक का प्रयोग करें alt

<img 
    height="90" 
    width="90" 
    src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg12.gif" 
    title="Image Not Found" 
/> 
+0

कृपया इसे समझाएं क्यों alt – sandeep

+2

के बजाय शीर्षक विशेषता का उपयोग करें, हमें ब्राउजर संगतता के लिए शीर्षक और alt दोनों का उपयोग करना होगा क्योंकि विभिन्न ब्राउज़र इस मामले के शीर्षक/alt –

+0

@ हर्ष हाँ आप सही में अलग-अलग विशेषता मानते हैं। वास्तव में मैं Google क्रोम पर परीक्षण कर रहा था मैं उसके अनुसार कोड पोस्ट करता हूं। लेकिन हमें एकाधिक ब्राउज़र के लिए दोनों का उपयोग करना होगा। – Sukhjeevan

4

के बजाय विशेषता हाँ, यह वेबकिट में एक मुद्दा है और क्रोमियम में यह भी बताया: http://code.google.com/p/chromium/issues/detail?id=773 यह 2008 के बाद से वहाँ है ... और अभी भी तय नहीं !!

मैं इसके आसपास अपना रास्ता बनाने के लिए javacsript और jQuery का एक टुकड़ा उपयोग कर रहा हूं।

function showAlt(){$(this).replaceWith(this.alt)}; 
function addShowAlt(selector){$(selector).error(showAlt).attr("src", $(selector).src)}; 
addShowAlt("img"); 

आप केवल एक कुछ छवियों चाहते हैं:

addShowAlt("#myImgID"); 
+0

मुझे नहीं पता कि मुझे अभी भी क्रोम में यह समस्या क्यों है, आपको लगता है कि यह ठीक करने के लिए एक बड़ी बात होगी, लेकिन आपका कोड काम करता है (एक बार डोमरेड ब्लॉक में लपेटा जाता है। तो धन्यवाद। – Kzqai

+0

क्या आप प्लंबर या jfiddle में अपना समाधान प्रदान कर सकते हैं। –

+0

यह बग 2016 में अभी भी मौजूद है! क्या आपका जावास्क्रिप्ट समाधान क्रोम एक्सटेंशन में "चालू" हो सकता है या तुरंत के लिए बूममार्कलेट हो सकता है -activation? – jumpjack

3

यहाँ jQuery में एक सरल समाधान नहीं है। आप इसे प्रत्येक पृष्ठ पर लागू करने के लिए इसे उपयोगकर्ता स्क्रिप्ट के रूप में कार्यान्वित कर सकते हैं।

$(function() { 
    $('img').live('mouseover', function() { 
    var img = $(this); // cache query 
    if (img.title) { 
     return; 
    } 
    img.attr('title', img.attr('alt')); 
    }); 
}); 

मैं भी एक Chrome एक्सटेंशन के रूप में इस को लागू किया है alt कहा जाता है। क्योंकि यह jQuery.live का उपयोग करता है, यह गतिशील रूप से लोड की गई सामग्री के साथ भी काम करता है।मैंने इस एक्सटेंशन को सेवानिवृत्त कर दिया है और इसे क्रोम स्टोर से हटा दिया है।

-2

मैं इस का उपयोग करें, यह php के साथ काम करता ...

<span><?php 
if (file_exists("image/".$data['img_name'])) { 
    ?> 
    <img src="image/<?php echo $data['img_name']; ?>" width="100" height="100"> 
    <?php 
}else{ 
    echo "Image Not Found"; 
}>? 
</span> 

अनिवार्य रूप से क्या कोड कर रहा है, फ़ाइल के लिए जाँच कर रहा है। $data वैरिएबल का उपयोग हमारे सरणी के साथ किया जाएगा, फिर वास्तव में वांछित परिवर्तन करें। यदि यह नहीं मिला है, तो यह एक अपवाद फेंक देगा।

1

विभिन्न ब्राउज़रों (गलत) इसे विभिन्न तरीकों से संभालते हैं। शीर्षक का उपयोग (एक पुराना आईई 'मानक') विशेष रूप से उपयुक्त नहीं है, क्योंकि शीर्षक विशेषता एक माउसओवर प्रभाव है। उपरोक्त jQuery समाधान (एलेक्सिस) सही ट्रैक पर प्रतीत होता है, लेकिन मुझे नहीं लगता कि 'त्रुटि' उस बिंदु पर होती है जहां इसे पकड़ा जा सकता है। मैं खुद के साथ src पर जगह है, और फिर पकड़ने त्रुटि से सफलता मिली है:

$('img').each(function() 
{ 
    $(this).error(function() 
    { 
     $(this).replaceWith(this.alt); 
    }).attr('src',$(this).prop('src')); 
}); 

यह, एलेक्सिस योगदान के रूप में, याद आ रही img छवि को निकालने में सहायता की है।

1

इंटरनेट एक्सप्लोरर 7 (और पहले) छवि पर मसाला करते समय, टूलटिप के रूप में alt विशेषता का मान प्रदर्शित करता है। HTML विनिर्देश के अनुसार, यह सही व्यवहार नहीं है। इसके बजाय शीर्षक विशेषता का उपयोग किया जाना चाहिए। स्रोत: http://www.w3schools.com/tags/att_img_alt.asp