अपने ब्लॉग फोटोगैलरी स्थापित करने के लिए ओवरलैप स्क्रिप्ट का इस्तेमाल कैसे करें ?

आज आपके लिए पेश है ओवरलैप स्क्रिप्ट इस स्क्रिप्ट के बारे में विस्तार से जानने से पहले आप निम्न दिखाई दे रहे दोनों चित्रों में से किसी एक चित्र पर माउस को ले कर जाएं | जब आप किसी के चित्र पर माउस ले कर जाएंगे तो उस चित्र पर तुरंत ही एक ओवरलैप केनवास उभरेगा |
इस केनवास पर आप आपको थोड़े से शब्दों में उस चित्र के बारे लिखा दिखाई देगा | यदि आप उन शब्दों को पढकर उस विषय के बारे में विस्तार से जानना चाहते हैं तो इसी केनवास पर ही उस से संबंधित विस्तृत लिंक को स्थापित कर दिया जाता है |

पहला चित्र	दूसरा चित्र
विजुअल बेसिक 6 अब आपकी अपनी भाषा हिंदी में इससे पहले कि हम विजुअल बेसिक-6 की प्रोग्रामिंग के बारे में जानने की प्रक्रिया शुरू करें, हमें प्रोग्रामिंग की कुछ बुनियादी अवधारणाओं को जरूर समझ लेना चाहिए कि :-	एडोब फोटोशाप : सिर्फ तीन लेयर में ग्लास टेक्स्ट कैसे बनाएँ ? >>> मैंने कई लेख "ग्लास फ़ोटोशॉप प्रभाव" पर इन्टरनेट पर देखे हैं जो की काफी लंबे व समझने में कठिन हैं \| आज मैं आपको बहुत ही आसान से समझ में आने वाले "Glass Text Effect" के बारे में बताऊंगा \| जो की बहुत ही आसान है \|

पहला चित्र

दूसरा चित्र

विजुअल बेसिक 6 अब आपकी अपनी भाषा हिंदी में
इससे पहले कि हम विजुअल बेसिक-6 की प्रोग्रामिंग के बारे में जानने की प्रक्रिया शुरू करें, हमें प्रोग्रामिंग की कुछ बुनियादी अवधारणाओं को जरूर समझ लेना चाहिए कि :-

एडोब फोटोशाप : सिर्फ तीन लेयर में ग्लास टेक्स्ट कैसे बनाएँ ? >>>
मैंने कई लेख "ग्लास फ़ोटोशॉप प्रभाव" पर इन्टरनेट पर देखे हैं जो की काफी लंबे व समझने में कठिन हैं | आज मैं आपको बहुत ही आसान से समझ में आने वाले "Glass Text Effect" के बारे में बताऊंगा | जो की बहुत ही आसान है |

आपने बहुत से प्रोफैशनल साईट पर फोटो गैलरी देखीं होंगी | ये स्क्रिप्ट अक्सर उन फोटोगैलरी में इस्तेमाल की जाती हैं | ऐसा क्यों किया जाता हैं या ऐसा करने की जरूरत क्या है ? वो इसलिए कि यदि हम एक पेज पर 10 या 20 चित्र प्रदर्शित करते हैं व उन चित्रों के बारे थोड़े विस्तार से भी लिखना चाहें तो भी पेज की हाईट तो बढ़ेगी ही, इसके साथ ही चित्रों के प्रदर्शन में अलग प्रभाव नज़र आता है | इसलिए फोटोगैलरी वाले पेज पर अक्सर इस स्क्रिप्ट का इस्तेमाल किया जाता है | अभी तक हिंदी के किसी भी ब्लॉग पर इसका इस्तेमाल नहीं किया गया है | इसलिए ही मन में विचार आया कि यदि कोई ब्लॉगर अपने ब्लॉग पर इस तरह का फोटोगैलरी वाला पेज बनाना चाहे तो बना सके | तो आइये जानते हैं की इस प्रकार की स्क्रिप्ट कैसे अपने ब्लॉग पर लगाई जाए |

आप इसका एक डेमो आप इस लिंक पर देख सकते हैं | इस स्क्रिप्ट को अपने ब्लॉग पर स्थापित करना आसान है बस कुछ चरण का पालन कीजिए व आप भी अपने ब्लॉग पर प्रोफैशनल साईट की तरह फोटोगैलरी पेज को बना सकते हैं |

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

नोट : यदि आपने अपने ब्लॉग पर पहले से ही 1.5.2 jQuery.min.js स्क्रिप्ट स्थापित कर रखी है तो आप पहले बटन पर कलिक न करके दूसरे बटन पर कलिक करें |

<br />
<br />
<center><style type="text/css">
div#Ainfo, div#Binfo, div#Cinfo, div#Dinfo, div#Einfo, div#Finfo, div#Ginfo, div#Hinfo, div#Iinfo, div#Jinfo{
background:#766767;
padding:5px;
color:white;
font-size:17px;
line-height:22px;
}
div #Ainfo a{color:#0BFFF6;font-size:18px;}
div #Ainfo a:hover{color:yellow;font-size:18px;}

div #Binfo a{color:#0BFFF6;font-size:18px;}
div #Binfo a:hover{color:yellow;font-size:18px;}

div #Cinfo a{color:#0BFFF6;font-size:18px;}
div #Cinfo a:hover{color:yellow;font-size:18px;}

div #Dinfo a{color:#0BFFF6;font-size:18px;}
div #Dinfo a:hover{color:yellow;font-size:18px;}

div #Einfo a{color:#0BFFF6;font-size:18px;}
div #Einfo a:hover{color:yellow;font-size:18px;}

div #Finfo a{color:#0BFFF6;font-size:18px;}
div #Finfo a:hover{color:yellow;font-size:18px;}

div #Ginfo a{color:#0BFFF6;font-size:18px;}
div #Ginfo a:hover{color:yellow;font-size:18px;}

div #Hinfo a{color:#0BFFF6;font-size:18px;}
div #Hinfo a:hover{color:yellow;font-size:18px;}

div #Iinfo a{color:#0BFFF6;font-size:18px;}
div #Iinfo a:hover{color:yellow;font-size:18px;}

div #Jinfo a{color:#0BFFF6;font-size:18px;}
div #Jinfo a:hover{color:yellow;font-size:18px;}
</style><br />
<br />
<script>
jQuery(function($){ //on document.ready

$('#info').overlaycontent({ //initialize overlay on single DIV with id="info"
  speed:500, //duration of animation in milliseconds
  dir:'up' //supports 'up', 'down', 'left', or 'right'
 })

$('div.imagecontainers').overlaycontent({ //initialize overlay on DIVs with class="imagecontainers"
  speed:300,
  dir:'down',
  opacity:0.8 //opacity: 0 to 1
 })

})
</script><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><br />
<script type="text/javascript" src="http://tipshindimein.googlecode.com/files/overlaybox.js"></script><br />
</center>