शुद्ध सीएसएस बनाने के लिए कैसे छवि ज़ूम प्रभाव पर क्लिक करें

CSS के लिए कोई pseudoclass नहीं है लक्ष्यीकरण क्लिक ईवेंट, और यह एक का गठन सबसे बड़ा दर्द अंक फ्रंट-एंड डेवलपर्स। निकटतम छद्म वर्ग है : सक्रिय किसी उपयोगकर्ता द्वारा उस समय अपने माउस को दबाए जाने की अवधि के लिए कौन सा स्टाइल है.

यह प्रभाव हालांकि अल्पकालिक है: एक बार जब उपयोगकर्ता माउस को छोड़ देता है, : सक्रिय कोई और काम नहीं करता है। हमें कुछ और रास्ता खोजने की जरूरत है CSS में क्लिक इवेंट का अनुकरण करें.

यह पोस्ट एक पाठक के अनुरोध के जवाब में लिखी गई है, और यह समझाने वाली है कि कैसे करना है शुद्ध सीएसएस के साथ क्लिक इवेंट को लक्षित करें एक विशिष्ट उपयोग के मामले में, छवि ज़ूम करें.

आप नीचे अंतिम परिणाम देख सकते हैं - के लिए एक सीएसएस केवल समाधान क्लिक पर छवि ज़ूम.

सीएसएस-ओनली सॉल्यूशन का उपयोग कब करें

आगे बढ़ने से पहले, मैं यह कहना चाहता हूं, कि इमेज जूम के लिए मैं CSS-only विधि की सिफारिश करता हूं (जो छवि के आयामों को बदलता है), केवल जब आप चाहते हैं एक या ए कुछ छवियों का समूह ज़ूम सुविधा के लिए.

के लिए उचित गैलरी, जावास्क्रिप्ट और अधिक लचीलापन और दक्षता प्रदान करता है.

फ्रंट-एंड तकनीक हम उपयोग करेंगे

अब आप सावधान हो गए हैं, चलो जल्दी से देखो 3 प्रमुख तकनीकें हम उपयोग करेंगे:

1. HTML टैग जो ब्राउज़र को अनुमति देता है एक छवि पर जोड़ने योग्य क्षेत्र बनाएं. पर अधिक पढ़ें मेरे पहले के पोस्ट में तत्व.
2. usemap की विशेषता टैग, जो छवि मानचित्र पर छवि को हुक करता है.
3. : लक्ष्य सीएसएस छद्म वर्ग यह उस तत्व का प्रतिनिधित्व करता है जिसे उसके आईडी चयनकर्ता का उपयोग करके लक्षित किया गया है.

1. HTML बेस बनाएं

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

छवि को ज़ूम करने के लिए आईडी होना ज़रूरी है, और बंद बटन के लिए एक लिंक होना चाहिए जो कि है href = "#" विशेषता, मैं समझाता हूँ कि बाद में पोस्ट में क्यों.

2. सीएसएस जोड़ें

प्रारंभ में, बंद करें आइकन प्रदर्शित नहीं किया जाना चाहिए. पद, हाशिया-, बाएं, तथा तल गुण जगह विस्तृत करें और आइकन बंद करें जहां हम चाहते हैं कि वे छवि के शीर्ष-दाएं कोने पर हों.

सूचक-घटनाएँ: कोई नहीं; नियम माउस घटनाओं की अनुमति देता है विस्तार आइकन से गुजरें तथा छवि पर पहुँचें.

 .img ऊँचाई: 150px; चौड़ाई: 200px;  .close बैकग्राउंड-इमेज: url ("क्लोज़-आइकन.पिंग"); बैकग्राउंड-रिपीट: नो-रिपीट; नीचे: 418px; कुछ भी डिस्प्ले मत करो; ऊंचाई: 32 पीएक्स; बायां: 462px; मार्जिन-टॉप: -32px; स्थिति: रिश्तेदार; चौड़ाई: 32 पीएक्स;  .expand नीचे: 125px; मार्जिन-लेफ्ट: -32px; मार्जिन-राइट: 16px; सूचक-घटनाएँ: कोई नहीं; स्थिति: रिश्तेदार;  

3. छवि मानचित्र जोड़ें

छवि मानचित्र पर, क्लिक करने योग्य क्षेत्र होना चाहिए ऊपरी-दाएँ कोने में छवि का विस्तार आइकन के ठीक नीचे, और इसके आकार के बारे में। इसे रखो तत्व पहले HTML में टैग। हम अगले चरण में चित्र को मानचित्र में बांध देंगे.

ऊपर दिए गए कोड ब्लॉक में, टैग परिभाषित करता है एक लिंकेबल क्षेत्र का आकार, आकार और यूआरआई एक छवि मानचित्र के अंदर। के लिए आयत आकार, आकार विशेषता लेता है रेक्ट मूल्य, और चार मूल्य का coords विशेषता पिक्सेल के बीच की दूरी का प्रतिनिधित्व करती है:

1. छवि के बाएं किनारे और लिंक क्षेत्र के बाएं किनारे
2. छवि के ऊपरी किनारे और लिंक क्षेत्र के ऊपरी किनारे
3. छवि के बाएं किनारे और लिंक क्षेत्र के दाहिने किनारे
4. छवि के ऊपरी किनारे और लिंक क्षेत्र के निचले किनारे

का मूल्य href विशेषता होना चाहिए हैश पहचानकर्ता छवि (यही कारण है कि छवि एक होना चाहिए आईडी).

4. छवि मानचित्र पर छवि को बांधें

जोड़ें usemap के रूप में छवि के लिए विशेषता इसे छवि मानचित्र पर बांधें. इसके मूल्य की जरूरत है हैश का प्रतिनिधित्व नाम की विशेषता टैग हमने चरण 3 में जोड़ा.

अब छवि मानचित्र का क्लिक करने योग्य क्षेत्र विस्तार बटन के पीछे स्थित है. जब उपयोगकर्ता विस्तार बटन पर क्लिक करता है, तो यह क्लिक करने योग्य क्षेत्र है जिसे वास्तविकता में क्लिक किया जाता है - याद रखें कि हमने विस्तार बटन बनाया है “प्रचलित” उसके साथ सूचक-घटनाएँ: कोई नहीं; चरण 2 में शासन.

इस तरह से उपयोगकर्ता छवि को ही लक्षित करता है इसे क्लिक करके, और क्लिक के बाद URI के साथ प्रत्यय हो जाता है "# Img1" टुकड़ा पहचानकर्ता.

5. स्टाइल : लक्ष्य छद्म क्लास

जब तक "# Img1" टुकड़ा पहचानकर्ता यूआरआई के अंत में है, लक्षित छवि हो सकती है के साथ स्टाइल किया : लक्ष्य छद्म वर्ग

लक्षित छवि के आयाम बढ़ जाते हैं, बंद बटन दिखाया जाता है, और विस्तृत बटन छिप जाता है.

 .img: लक्ष्य ऊंचाई: 450px; चौड़ाई: 500 पीएक्स;  .img: लक्ष्य + .close प्रदर्शन: ब्लॉक;  .img: लक्ष्य + .close + .expand प्रदर्शन: कोई नहीं;  

बंद बटन कैसे काम करता है

क्लोज बटन को बैकग्राउंड इमेज (स्टेप 2) के रूप में जोड़ा गया था, और वास्तव में ए के साथ टैग href = # विशेषता (चरण 1), जब इसे क्लिक किया जाता है, तो यह URI के अंत से खंड पहचानकर्ता को हटा देता है। इसलिए यह भी निकालता है : लक्ष्य छद्म वर्ग छवि से, और छवि से अपने पिछले आकार पर वापस जाता है.

पृष्ठभूमि की जानकारी: क्यों और नहीं ?

अब तक, आप निश्चित रूप से समझते हैं कि काम करने के लिए इस सीएसएस-केवल समाधान के लिए सबसे महत्वपूर्ण बात है का उपयोग करके छवि को लक्षित करें href = "# imgid" गुण, जिसका उपयोग करके भी किया जा सकता है छवि मानचित्र के बजाय टैग.

चूक के लिए मूल्य आकार विशेषता एक बनाता है आयताकार लिंक करने योग्य क्षेत्र जो पूरी छवि को कवर करता है. यदि आप उपयोग करना चाहते थे इसके बजाय, आपको छवि को कवर करने के लिए इसे कोड करना होगा, और आपको उसी उद्देश्य के लिए एक आवरण तत्व का उपयोग भी करना पड़ सकता है.

इससे पहले IE ब्राउज़रों का समर्थन करने के लिए, आप या तो उपयोग करना चाह सकते हैं के बजाय , या उस पर कहीं भी क्लिक करके छवि को ज़ूम इन किया गया है (इस मामले में विस्तार आइकन की कोई आवश्यकता नहीं होगी).