पॉप-अप इमेज कैसे बनाएं

विषयसूची:

पॉप-अप इमेज कैसे बनाएं
पॉप-अप इमेज कैसे बनाएं

वीडियो: पॉप-अप इमेज कैसे बनाएं

वीडियो: पॉप-अप इमेज कैसे बनाएं
वीडियो: पॉप अप फोटो कार्ड ट्यूटोरियल | स्क्रैपबुक के लिए तत्व | स्क्रैपबुक पेज कैसे बनाये | शिल्प अंतरिक्ष द्वारा 2024, मई
Anonim

पॉप-अप या पॉप-अंडर विंडो इंटरनेट पर अधिक से अधिक लोकप्रिय हो रहे हैं। या, अधिक सरलता से, पॉप-अप चित्र। कई साइट मालिकों को अक्सर उन्हें विज्ञापन उद्देश्यों के लिए बनाना पड़ता है, लेकिन हर कोई उनके निर्माण के लिए एल्गोरिदम नहीं जानता है।

पॉप-अप इमेज कैसे बनाएं
पॉप-अप इमेज कैसे बनाएं

यह आवश्यक है

  • - एचटीएमएल संपादक;
  • - स्मरण पुस्तक;
  • - मेजबानी।

अनुदेश

चरण 1

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

चरण दो

"हेड" और "/ हेड" टैग के बीच निम्नलिखित कोड पेस्ट करें:

थंबनेल {स्थिति: रिश्तेदार; जेड-इंडेक्स: 0;}

थंबनेल: होवर {पृष्ठभूमि-रंग: पारदर्शी; जेड-इंडेक्स: 50;}

.थंबनेल स्पैन {/ * बढ़ी हुई छवि के लिए सीएसएस * / स्थिति: पूर्ण; पृष्ठभूमि-रंग: हल्का पीला; पैडिंग: 5px; बाएं: -1000 पीएक्स; सीमा: 1px धराशायी ग्रे; दृश्यता: छिपा हुआ; रंग काला; पाठ-सजावट: कोई नहीं;}

.थंबनेल अवधि img {/ * बढ़ी हुई छवि के लिए CSS * / सीमा-चौड़ाई: 0; पैडिंग: 2px;}

.थंबनेल: होवर स्पैन {/ * होवर पर बढ़ी हुई छवि के लिए सीएसएस * / दृश्यता: दृश्यमान; शीर्ष: 0; बाएं: 65 पीएक्स; / * वह स्थिति जहां बढ़ी हुई छवि क्षैतिज रूप से ऑफसेट होनी चाहिए * /}

चरण 3

कोड की अंतिम पंक्ति पर मान बदलकर पॉपअप छवि के क्षैतिज ऑफसेट को समायोजित करें। "बॉडी" और "/ बॉडी" टैग के बीच स्थान आवंटित करें जहां आप चाहते हैं कि छवि वेब पेज पर दिखाई दे। फिर निम्नलिखित कोड को कॉपी और पेस्ट करें:

टेक्स्ट शीर्षक का उदाहरण

एक पाठ शीर्षक का एक उदाहरण"

चरण 4

पॉपअप फोटो के लिए उपयोग की गई फ़ाइल के साथ "folder / bigpci1.jpg" बदलें। कोड के दूसरे ब्लॉक के साथ भी ऐसा ही करें। पॉप-अप छवि में जो लिखा जाना चाहिए उसमें लाइन "टेक्स्ट शीर्षक का उदाहरण" बदलें। पॉप-अप छवि के आकार को समायोजित करने के लिए कोड में ऊंचाई और चौड़ाई मान भी बदलें। अधिक रेखाचित्र जोड़ने के लिए कोड के अतिरिक्त ब्लॉक बनाएं। HTML दस्तावेज़ में आवश्यकतानुसार अन्य विशेषताएँ, टैग और टेक्स्ट दर्ज करें। HTML फ़ाइल को सहेजें और फिर उसे अपने वेब सर्वर पर अपलोड करें।

सिफारिश की: