Subscribe Us

header ads

how to setup image and text zoom script

इमेज़ व टेक्स्ट ज़ूम स्क्रिप्ट को अपने ब्लॉग पर कैसे स्थापित करें ?


जैसा कि नाम से जाहिर है | जी हाँ ! आज आपके लिए पेश है इमेज़ ज़ूम स्क्रिप्ट
बस आप उस चित्र पर माउस को ले जाएँ, तुरंत ही तस्वीर बड़े रूप में दिखाई देगी | माउस को हटाते ही अपने मूल रूप में वापिस |

इसे ब्लॉग पर स्थापित करना बहुत ही आसान है | इस स्क्रिप्ट में किसी जावा स्क्रिप्ट का प्रयोग नहीं किया गया है, सिर्फ CSS कोड का इस्तेमाल किया गया है | इस कोड में आप किसी भी चित्र को कितना बड़ा दिखाना चाहते है ? ये आप अपनी पसंद अनुसार तय कर सकते है |


इस स्क्रिप्ट का इस्तेमाल आप किसी भी चित्र या किसी भी पैराग्राफ पर भी कर सकते हैं |
उदाहरण आप इसी लाइन पर देख सकते है | इस लाइन पर माउस लाएं व इसे ज़ूम होते हुए देखें |


यदि आप इस ट्रिक को इस्तेमाल करना चाहते हैं तो आप निम्न चरणों का पालन कीजिये :-

पहला कदम : निम्न बटन पर कलिक करके इस कोड को अपने ब्लॉग पर स्थापित कर लें |











दूसरा कदम : निम्न कोड को देखें जहाँ पर अपनी पोस्ट के बारे में यहाँ पर लिखें लिखा है वहाँ पर आप अपनी पोस्ट के बारे में विस्तार से लिखें |
यदि आपने दूसरे कदम वाली प्रक्रिया आसानी से पूरी कर ली तो ये इफेक्ट आपकी पोस्ट पर बड़ी आसानी से लागू हो जायेगा | किसी भी चित्र पर इस इफेक्ट का पयोग करने के लिए निम्न से दूसरा कोड देखें |

<p class="Zoom">अपनी पोस्ट के बारे में यहाँ पर लिखें </p>

<img class="Zoom" style="float:right;padding-left:20px;" src="images/ADbanner_001.jpg" alt="ADBABanner_001"/>
नोट : आप इस प्रकार की पोस्ट EDIT मोड में लिखनी है |


क्या आपको ये आई-मैजिक अंदाज़ पसंद आया ? यदि हां !!! तो अपने विचारों से अवगत कराएं |

"टिप्स हिन्दी में ब्लॉग" की हर नई जानकारी अपने मेल-बॉक्स में मुफ्त पाएं ! Save as PDF





एक टिप्पणी भेजें

8 टिप्पणियाँ

  1. वाह...
    बहुत सुन्दर प्रस्तुति!
    आपकी इस उत्कृष्ट प्रविष्टी की चर्चा कल रविवार (14-10-2012) के चर्चा मंच पर भी की गई है!
    सूचनार्थ!

    जवाब देंहटाएं
  2. काफी नयी जानकारी है.इस तरह की जानकारियां यहीं पर मिल सकती है.आपने ब्लोगर्स के लिए जो काम किया है ,वो सबसे जुदा है.एक फरमाइश आपसे ये है की कुछ नए ब्लोगर ब्लॉग का लोगो बनाना चाहते हैं.इनको कोई आसान तरीका पोस्ट करके बताएं.


    मोहब्बत नामा
    मास्टर्स टेक टिप्स

    जवाब देंहटाएं
  3. आपके द्वारा दी गई हर जानकारी लाजवाब होती है !!

    जवाब देंहटाएं
  4. नमस्‍कार सरश्
    जूम इफेक्‍ट एक कठिन प्रकिया लग रही थी पर आपकी पोस्‍ट के कारण यह संभव हो पाया पर श्रीमान जी मेने अपने ब्‍लाग पर निम्‍न कोड लगाया जिससे इफेक्‍ट तो आ गया पर वह साईड मे ज्‍यादा जाता है और चित्र् मध्‍य मे भी नही आता है यह कोड लागया गया है
    [img]http://snag.gy/eZ6Xo.jpg[/img]

    आप ये बताये कि इसमे क्‍या बदलाव किया जाये ताकि पोस्‍ट मे फोटो मध्‍य मे आ जाये तथा जूम होते समय साइड मे ज्‍यादा नही जाये आप मेरा द्वारा किया गया बदलाव यहा देखकर बताये सर

    युनिक ब्‍लाग-----रेल की वर्तमान स्थिति का पता करे

    जवाब देंहटाएं
    उत्तर
    1. आप निम्न कोड में 1.55 की जगह अपनी पसंद अनुसार वैल्यू कम कर दें | आप जितनी वैल्यू कम करेंगे उतना ही कम जूम होगा | पहली वैल्यू मोज़िला के लिए, दूसरी वैल्यू क्रोम के लिए व तीसरी वैल्यू ओपेरा के लिए है |

      -moz-transform: scale(1.55);
      -webkit-transform: scale(1.85);
      -o-transform:scale(1.85);

      हटाएं
  5. बहुत अच्छी लगी यह जानकारी
    वाकई ....आभार !

    जवाब देंहटाएं

आपकी टिप्पणी मेरे लिए मेरे लिए "अमोल" होंगी | आपके नकारत्मक व सकारत्मक विचारों का स्वागत किया जायेगा | अभद्र व बिना नाम वाली टिप्पणी को प्रकाशित नहीं किया जायेगा | इसके साथ ही किसी भी पोस्ट को बहस का विषय न बनाएं | बहस के लिए प्राप्त टिप्पणियाँ हटा दी जाएँगी |