एक <बटन> तत्व में छवि एम्बेड करें

Question

मैं <button>HTML में एक तत्व पर एक png छवि प्रदर्शित करने की कोशिश कर रहा हूँ । बटन छवि के समान आकार है, और छवि को दिखाया गया है, लेकिन किसी कारण से केंद्र में नहीं है - इसलिए यह सब देखना असंभव है। दूसरे शब्दों में ऐसा लगता है कि छवि का शीर्ष दायां कोना बटन के केंद्र में स्थित है, न कि बटन के शीर्ष दाएं कोने पर।

यह HTML कोड है:

<button id="close" class="closing" onClick="javascript:close_clip()"><img src="icons/close.png" /></button>

अद्यतन:
वास्तव में क्या होता है, मुझे लगता है, एक मार्जिन समस्या है। मुझे एक दो पिक्सेल मार्जिन मिलता है, इसलिए पृष्ठभूमि की छवि बटन से बाहर जा रही है। बटन और छवि एक ही आकार है, जो केवल है 20px, तो यह बहुत उल्लेखनीय है ... मैंने कोशिश की margin:0, padding:0है, लेकिन यह मदद नहीं की ...

Comments

मेरे लिए, यह पूरी तरह से काम करता है ... जो आप इसे अनुभव कर रहे हैं वह संदर्भ है? कोड की कुछ और पंक्तियों को पोस्ट करना संभव है?

आप इस तरह के रूप में एक जीवित साइट, पर इस पुन: पेश कर सकते हैं जे एस फिडल हमें के लिए देख क्या हो रहा है?

— डेविड का कहना है कि

Answer 1

आप इनपुट प्रकार छवि का उपयोग कर सकते हैं।

<input type="image" src="http://example.com/path/to/image.png" />

यह एक बटन के रूप में काम करता है और इसमें इवेंट हैंडलर जुड़े हो सकते हैं।

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

<button style="background: url(myimage.png)" ... />

Comments

... और फॉर्म जमा करने के लिए जावास्क्रिप्ट की आवश्यकता नहीं है।

— कॉमफरिक

-1: " चाहिए " एक शब्द बहुत मजबूत है, क्योंकि यह वास्तव में ऐसा नहीं है जो इसके <input type="image">लिए डिज़ाइन किया गया है। आप सीएसएस का सुझाव क्यों नहीं देंगे?

— वेस्ले मर्च

मैं एक बटन का उपयोग करने के लिए प्राथमिकता देता हूं। अगर मुझे कोई जवाब नहीं मिला तो मैं इसे करूंगा। धन्यवाद

— अमित हागिन

फिर इसे स्टाइल करें, जैसा कि इस और अन्य उत्तरों में बताया गया है।

— एंड्रयू बार्बर

यह मत भूलो कि दोनों प्रारंभिक अंत वाले टैग बटन तत्व के लिए आवश्यक हैं, इसलिए तकनीकी रूप से <बटन /> मान्य नहीं है, यह <बटन> </ बटन> होना चाहिए।

— तमस Czinege

Answer 2

यदि छवि शब्दार्थ डेटा का एक टुकड़ा है (उदाहरण के लिए एक प्रोफ़ाइल चित्र की तरह), तो <img>अपने अंदर एक तत्व <button>का उपयोग करें और सीएसएस का उपयोग करें <img>। यदि छवि केवल बटन को नेत्रहीन रूप से मनभावन बनाने का एक तरीका है, तो background-imageस्टाइल को <button>(और उपयोग न करें <img>) के लिए सीएसएस का उपयोग करें ।

डेमो: http://jsfiddle.net/ThinkingStiff/V5Xqr/

HTML:

<button id="close-image"><img src="http://thinkingstiff.com/images/matt.jpg"></button>
<button id="close-CSS"></button>

सीएसएस:

button {
    display: inline-block;
    height: 134px;
    padding: 0;
    margin: 0;
    vertical-align: top;
    width: 104px;
}

#close-image img {
    display: block;
    height: 130px;  
    width: 100px;
}

#close-CSS {
    background-image: url( 'http://thinkingstiff.com/images/matt.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

आउटपुट:

Comments

@ThinkingStiff <image>तत्व? मुझे लगता है कि आप <img>अपने पाठ में मतलब ;)

— ComFreek

अच्छे उत्तर के लिए धन्यवाद !! लेकिन समस्या बनी हुई है ... मैंने सवाल को थोड़ा अद्यतन किया - शायद यह आपको इसे समझने में मदद कर सकता है।

— अमित हागिन

@AmitHagin मैंने आपका अपडेट देखा। याद रखें एक बटन की सीमाएँ हैं, जो इसकी ऊंचाई की गणना में शामिल हैं। तो एक 20pxलंबी छवि को फिट करने के लिए , बटन की ऊंचाई होनी चाहिए 24px।

— थिंकिंगस्टिफ

@AmitHagin इसके अलावा, व्हॉट्सएप के मुद्दों को रोकने के लिए, अपने <img>को बदलें display: block;। मैंने इसे दिखाने के लिए डेमो लिंक को अपडेट किया।

— सोच

क्या इस पद्धति के साथ अभिगम्यता / कुल पाठ के बारे में कोई चिंता है? मैं वास्तव में जंग खा रहा हूं, लेकिन पाठ को कुछ हजार पिक्सेल द्वारा अभी भी स्वीकार किए गए वर्कअराउंड द्वारा छुपा रहा है?

— रोब ड्रिमी

Answer 3

इसे इस्तेमाल करे

   <input type="button" style="background-image:url('your_url')"/>

Answer 4

एक बटन में एक छवि डालने का सबसे सरल तरीका:

<button onclick="myFunction()"><img src="your image name here.png"></button>

यह स्वचालित रूप से छवि के आकार के बटन का आकार बदल देगा।

Answer 5

आप किसी चित्र का उपयोग क्यों नहीं करते हैं onclick विशेषता के ?

उदाहरण के लिए:

<script>
function myfunction() {
}
</script>
<img src='Myimg.jpg' onclick='myfunction()'>

Answer 6

अपनी परियोजना में छवियों के नाम के साथ नया फ़ोल्डर जोड़ें। कुछ चित्र छवियाँ फ़ोल्डर में रखें। फिर ठीक चलेगा।

<input type="image" src="~/Images/Desert.jpg" alt="Submit" width="48" height="48">

Answer 7

इस प्रारूप की तरह आज़माएं और छवि का आकार प्रबंधित करने के लिए "चौड़ाई" विशेषता का उपयोग करें, यह सरल है। जावास्क्रिप्ट को तत्व में भी लागू किया जा सकता है।

<button><img src=""></button>

Answer 8

बटन सीधे छवियों का समर्थन नहीं करते हैं। इसके अलावा जिस तरह से आप कर रहे हैं लिंक के लिए है ()

छवियाँ शैली में BACKGROUND-IMAGE गुण का उपयोग करके बटनों पर जोड़ी जाती हैं

आप टैग का उपयोग करके दोहराव और अन्य गुणों को भी निर्दिष्ट कर सकते हैं

उदाहरण के लिए: एक बटन में जोड़े गए मूल चित्र में यह कोड होगा:

    <button style="background-image:url(myImage.png)">

शांति

Comments

आपका उत्तर गलत है, आधिकारिक दस्तावेज कहता है कि इसकी अनुमति है।

— बिपहोबे 10