HTML में बटन पृष्ठभूमि बदलने का कार्य

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

बटन बनाना

CSS फॉर्मेटिंग के बिना, एक बुनियादी वेब पेज बटन बनाने के लिए आवश्यक कोड निम्नानुसार दिखाई देता है:

आपके पास CSS क्लास संदर्भ जोड़ने का विकल्प है जो बटन की पृष्ठभूमि को पीले रंग में सेट करता है जैसा कि यहां दिखाया गया है:

आपके दस्तावेज़ की शैली अनुभाग में रखा गया निम्न सीएसएस वर्ग, वह वर्ग बनाता है:

.स्टाइलबटन {पृष्ठभूमि-रंग: पीला ;;

"येलो" को किसी भी मान्य HTML रंग में बदल दें ताकि आप अपनी इच्छा को प्राप्त कर सकें। आप निम्नलिखित सीएसएस कोड का उपयोग करके इसके बजाय बटन की पृष्ठभूमि में एक छवि जोड़ सकते हैं:

.styleButton {पृष्ठभूमि-छवि: url ('myImage.jpg');};

वेब पर किसी भी छवि के URL या अपने वेब सर्वर पर किसी छवि के URL के साथ "myImage.jpg" को बदलें।

फ़ंक्शन पैरामीटर

निम्न उदाहरण एक फ़ंक्शन की रूपरेखा दिखाता है जो एक बटन की पृष्ठभूमि को बदलता है:

फंक्शन चेंजबेकग्राउंड (बटनआईडी, बैकग्राउंड टाइप, बटन बैकग्राउंड) {अगर (बैकग्राउंड टाइप == "इमेज") {// चेंज बटन की बैकग्राउंड इमेज}

और {// बटन का पृष्ठभूमि रंग बदलें}}

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

कोड तर्क

निम्नलिखित कोड एक बटन के लिए एक पृष्ठभूमि छवि जोड़ने या पृष्ठभूमि पृष्ठभूमि पैरामीटर में पारित मूल्य के आधार पर अपने पृष्ठभूमि का रंग बदलने के लिए आवश्यक बयानों को सूचीबद्ध करता है:

function changeBackground (बटनआईडी, बैकग्राउंड टाइप, बटन बैकग्राउंड) {if (बैकग्राउंड टाइप == "इमेज") {// बटन का बैकग्राउंड इमेज var urlValue = "URL (" + बटनबेकग्राउंड + ")" बदलें; document.getElementById (बटनआईडी)। }

और {// बटन का बैकग्राउंड कलर डॉक्यूमेंट ।getElementById (बटनआईडी) .style.backgroundColor = buttonBackground; }}

यदि आप फ़ंक्शन को कॉल करते हैं और इसे "इमेज" का बैकग्राउंड टाइप करते हैं, तो कोड बटन की बैकग्राउंड को सेट करता है बटन के बैकग्राउंड वेरिएबल में दिए गए कलर को इमेजेज फीचर देता है। अन्यथा, कोड बटन के बैकग्राउंडर विशेषता को बटन से हटा देता है, जो बटन बटन ग्राउंड चर में पारित हो जाता है।

टिप्स

पृष्ठभूमि में एक छवि जोड़ने के लिए फ़ंक्शन का उपयोग करते समय, वह चुनें जो बटन के अंदर फिट होने के लिए पर्याप्त छोटा हो। HTML एक छवि को पेज तत्व के बिना फिट करने के लिए कम नहीं करता है। आप उनके लिए छोटे एनिमेटेड GIFS जोड़कर बटन बैकग्राउंड मूव, पल्सेट या ग्लो भी कर सकते हैं। बटन पर जटिल चित्र रखते समय सावधान रहें क्योंकि यदि आपके बटन में पाठ है तो वे बटन के पाठ को पढ़ना मुश्किल बना सकते हैं।