👩🏿‍🤝‍👩🏻 ⚫️ 🕳️ NoScript फोटो एल्बम 🚬 🤘🏾 🧘🏻

अब कई साइटें जावास्क्रिप्ट के बिना नहीं कर सकती हैं, और अक्सर यह देखने के लिए कि हमें क्या दिखाना चाहते हैं, यह देखने के लिए NoScript बंद करना होगा। और इसलिए मैंने जावास्क्रिप्ट के बिना एक पृष्ठ पर एक हल्के कॉम्पैक्ट फोटो एल्बम बनाने के लिए सोचा। केवल HTML और CSS का उपयोग किया गया था।

उद्देश्य:
1 बड़ी छवि उपलब्ध स्थान को ऊपर ले जाती है।
2 थंबनेल भी इसे यथासंभव भरते हैं।
3 कोई माउस क्लिक (लेकिन आप कर सकते हैं) और अगली छवि देखने के लिए स्क्रॉल कर सकते हैं (अच्छी तरह से, सिवाय इसके कि अगर थंबनेल स्क्रीन से बड़े हैं)।
4 कीबोर्ड और माउस का उपयोग करके देखें।
5 कोई स्क्रिप्ट नहीं।
6 पिछड़ेपन को बनाए रखते हुए।

छद्म वर्ग: मंडराना और: ध्यान कार्यान्वयन के लिए चुने गए थे

रिक्त सरल है (शुरुआत में यह थोड़ा अधिक जटिल था):

<! doctype html>
< html >
< सिर >
< मेटा http-equiv = "सामग्री-प्रकार" सामग्री = "पाठ / html; चारसेट = utf-8" / >
< शीर्षक > NoScript एल्बम < / शीर्षक >
< लिंक rel = "स्टाइलशीट" प्रकार = "टेक्स्ट / सीएसएस" href = "style2.css" / >
< लिंक rel = "स्टाइलशीट" टाइप = "टेक्स्ट / css" href = "imgs.css" / >
< आधार लक्ष्य = "_blank" / >
< / head >
< शरीर >
 

<a href = "http://kirpich.example.com/imgs/rust/rust_vid-1.jpg "id = "lnk0" वर्ग = "lnk">
 < img src = "http://kirpich.example.com/thmb/rust/rust_vid-1.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg "id = "lnk1" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/fjord/fjord_vid-1.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/imgs/shater/shater_enter.jpg "id = "lnk2" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/shater/shater_enter.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/imgs/osenniy_list/vid1.jpg "id = "lnk3" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/osenniy_list/vid1.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/imgs/vsevologsk1.jpg "id = "lnk4" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/vsevologsk1.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/imgs/luch/Sertolovo.jpg id = "lnk5" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/luch/Sertolovo.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/921-1_.jpg" id = "lnk6" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/921-1_.jpg" alt = "" > 
< / a >

<a href = "http://kirpich.example.com/917-1.jpg" id = "lnk7" class = "lnk">
 < img src = "http://kirpich.example.com/thmb/917-1.jpg" alt = "" > 
< / a >
< / अवधि >
< / शरीर >
< / html >

CSS के बिना ऐसा एल्बम "पुराने तरीके से" काम करता है और सभ्य दिखता है।

आइए थोड़ा बदलें:

शरीर {
पृष्ठभूमि-रंग : # 555555 ;
रंग : सफेद ;
ऊंचाई : 100 % ;
}

.lnk {
प्रदर्शन : ब्लॉक ;
फ्लोट : बाएं ;
मार्जिन-बॉटम : 10 पीएक्स ;
मार्जिन-वाम : 10px ;
अतिप्रवाह : छिपा हुआ ;
}

.lnk .img {
स्थिति : रिश्तेदार ;
z-index : 3 ;
मार्जिन-बॉटम : 10 पीएक्स ;
सीमा : 1px ठोस काला ;
अतिप्रवाह : छिपा हुआ ;
प्रदर्शन : टेबल-सेल ;
ऊंचाई : 100 पीएक्स ;
ऊर्ध्वाधर-संरेखित करें : मध्य ;
पृष्ठभूमि-रंग : # 555555 ;
}

img {
ऊर्ध्वाधर-संरेखित करें : मध्य ;
सीमा : 0px ;
चौड़ाई : 100px ;
}

प्रदर्शन के लिए सतहों को तैयार करें:

.lnk : होवर : के बाद {
सामग्री : "" ;
}

.lnk : फ़ोकस , .lnk : होवर : के बाद {
पृष्ठभूमि-रंग : # 555555 ;
पृष्ठभूमि- आकार : समाहित ;
पृष्ठभूमि-स्थिति : केंद्र ;
बैकग्राउंड-रिपीट : नो-रिपीट ;
कर्सर : क्रॉसहेयर ;
}

परतों को पूरी खिड़की पर लाएँ:

.cover , .lnk : होवर : के बाद , .lnk : फ़ोकस {
स्थिति : निश्चित ;
शीर्ष : 0px ;
बायां : 0px ;
चौड़ाई : 100 % ;
ऊंचाई : 100 % ;
मार्जिन : 0px ;
}

जवाबदेही बनाए रखते हुए चित्र छिपाएँ:

। छिपाना : मंडराना। img {
अपारदर्शिता : 0.01 ;
फ़िल्टर : अल्फा ( अपारदर्शिता = 1 ) ;
कर्सर : क्रॉसहेयर ;
}

हम कवर करते हैं। इसके अलावा: होवर केवल छवियों पर काम करता है:

.कोवर {
z-index : 2 ;
}

हम .lnk को लेते हैं ताकि यह अपने साथ अन्य छवियों को कवर करे:

.lnk : फोकस
z-index : 4 ;
}

झलक छिपाएं:

.lnk : फ़ोकस .img {
प्रदर्शन : कोई नहीं ;
}

और निम्नलिखित दिखाएं:

.lnk : फोकस + .lnk {
स्थिति : निश्चित ;
नीचे : 20 पीएक्स ;
सही : 0px ;
z-index : 4 ;
}

इससे पारदर्शिता निकालें:

.lnk : फोकस + .lnk .img {
अपारदर्शिता : 1 ;
फ़िल्टर : अल्फा ( अपारदर्शिता = 100 ) ;
सीमा : 1px ठोस काला ;
}

यदि थंबनेल इसके बगल में है, तो एक बड़ी छवि छुपाएं:

.lnk : फ़ोकस + .lnk : के बाद {
प्रदर्शन : कोई नहीं ;
}

खैर, एक अलग फ़ाइल में हम चित्र अपलोड करते हैं:

# lnk0 : फ़ोकस , # lnk0 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/imgs/rust/rust_vid-1.jpg' ) ;
}
# lnk1 : फ़ोकस , # lnk1 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/imgs/fjord/fjord_vid-1.jpg' ) ;
}
# lnk2 : फ़ोकस , # lnk2 : hover : after {
पृष्ठभूमि-चित्र : url ( 'http://kirpich.example.com/imgs/shater/shater_enter.jpg) ) ;
}
# lnk3 : फ़ोकस , # lnk3 : hover : after {
पृष्ठभूमि-चित्र : url ( 'http://kirpich.example.com/imgs/osenniy_list/vid1.jpg) ) ;
}
# lnk4 : फ़ोकस , # lnk4 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/imgs/vsevologsk1.jpg' ) ;
}
# lnk5 : फोकस , # lnk5 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/imgs/luch/Sertolovo.jpg' ) ;
}
# lnk6 : फ़ोकस , # lnk6 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/921-1_.jpg' ) ;
}
# lnk7 : फ़ोकस , # lnk7 : hover : after {
पृष्ठभूमि-छवि : url ( 'http://kirpich.example.com/917-1.jpg' ) ;
}

दुर्भाग्य से, केवल: मंडराना माता-पिता को प्रभावित कर सकता है, और पड़ोसी को तत्व के लिए, कुछ भी नहीं लगता है।

तो, हमने क्या किया?

जब आप किसी छवि के थंबनेल को "स्पर्श" करते हैं, तो उसका पूर्ण संस्करण प्रदर्शित होता है, और थंबनेल पारदर्शी हो जाते हैं। थंबनेल पर ध्यान केंद्रित करते समय .lnk अपने आप को थंबनेल के साथ कवर करता है और एक बड़ी छवि प्रदर्शित करता है।

माउस केवल थंबनेल से थंबनेल पर जाता है।
टैब या शिफ्ट + टैब के साथ कीबोर्ड (ओपेरा: Ctrl + ऊपर या Ctrl + नीचे)।

संदर्भ htmlbook.ru था।

पीएस इंटरनेट एक्सप्लोरर इस उदाहरण की कार्यक्षमता का पूरी तरह से समर्थन नहीं करता है।

पीपीएस संक्रमण के साथ लुप्त होती पूर्वावलोकन को नरम कर दिया:

। img {
/ * फ़ायरफ़ॉक्स * /
- मोज़ - संक्रमण - संपत्ति : अपारदर्शिता ;
- मोज़ - संक्रमण - अवधि : 2 एस ;

/ * वेबकीट * /
- वेबकिट - संक्रमण - संपत्ति : अपारदर्शिता ;
- वेबकिट - संक्रमण - अवधि : 2 एस ;

/ * ओपेरा * /
- ओ - संक्रमण - संपत्ति : अपारदर्शिता ;
- ओ - संक्रमण - अवधि : 2 एस ;

/ * मानक * /
संक्रमण - संपत्ति : अपारदर्शिता ;
संक्रमण - अवधि : 2 एस ;
}

NoScript फोटो एल्बम

More articles: