ব্লগস্পট ব্লগে [পর্ব-০১] :: মাউসের পিছে রঙের খেলা

টেক লাভার ভাই বোনদের জানাই শরত সকালের রোদেলা শুভেচ্ছা। আশাকরি আপনারা ভালো আছেন। ইদ আর পুজো পাশাপাশি এসেছে বাঙালীর দুয়ারে। তাই আমাদের সবার ঘরে ঘরে আনন্দের হিল্লোল। ইদের ব্যস্ততার ফাঁকে আমার ব্লগটি পড়ার সময় পাবেন কিনা জানিনা!

মাউসের কার্সরের পেছনে কিছু অক্ষর ঘুরে বেড়াচ্ছেন। মাউস নাড়ালে লেখাগুলো তালে তালে নাচতে থাকে। টেকটিউনসের কল্যাণে আমরা সেটা শিখে ফেলেছি। আজ আমি শেখাবো কিভাবে মাউসের কার্সরে টেক্সটের বদলে রঙের ছটা দেয়া যায়।

  •  ব্লগার ড্যাশবোর্ড থেকে  Design যান।
  •  Layout  এ যান এবং  Add a Gadget ক্লিক করুন।
  •  HTML/JavaScript সিলেক্ট করুন।
  • নিচের কোডটি কপি করে পেস্ট করুন।

<script type="text/javascript">

var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung

var bubbles=100; // jumlah maksmal gelembung

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();

window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];

div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";

document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}

function bubble() {

var c;

if (x!=ox || y!=oy){

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby

) {

bubb

.left=(bubbx

=x)+"px";

bubb

.top=(bubby

=y)+"px";

bubb

.width="3px";

bubb

.height="3px"

bubb

.visibility="visible";

bubbs

=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby

) update_bubb(c);

setTimeout("bubble()", 40);

}

function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown;

}

window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}

window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height;

div.style.width=width;

div.style.overflow="hidden";

return (div);

}

</script>

  • gadget গ্যাজেট বা উইজেট এর শিরোনাম ফাঁকা রেখে সেভ করুন।

কাজ শেষ। এখন আপনার ব্লগ চেক করার পালা। যখন আপনার ব্লগে মাউস ঘোরাবেন দেখবেন এর চারপাশে গোলাপী বুদবুদ ।

টেক টিপস নিয়ে এটা আমার প্রথম টিউন।  আশাকরি আপনাদের ভাল লাগবে। এর এই টিউনটি আগে কেউ করে ফেললে আমি স্যরি । যদিও এই জ্ঞান গুলো “ইনভেনশান” নয় জাস্ট “ডিসকভারি”। একাধিক পোস্ট পাঠককে সহজভাবে বোঝার উপায় করে দিতে পারে। কিন্তু কপি পেস্ট প্রযোজনা কখনো আদর পেতে পারেনা।

Level 2

আমি সরদার ফেরদৌস। Asst Manager, Samuda chemical complex Ltd, Munshiganj। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 9 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 94 টি টিউন ও 463 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 1 ফলোয়ার আছে এবং আমি টেকটিউনসে 1 টিউনারকে ফলো করি।

আমি ফেরদৌস। জন্ম সুন্দরবনের কাছাকাছি এক জনপদে। ইসলামি বিশ্ববিদ্যালয় বাংলাদেশ থেকে লেখাপড়া করেছি এপ্লাইড কেমিস্ট্রি এন্ড কেমিক্যাল ইঞ্জিনিয়ারিংয়ে। এরপরে চাকরি করছি সামুদা কেমিকেল কমপ্লেক্স লিমিটেডের উৎপাদন বিভাগে সহকারী ম্যানেজার হিসেবে। এছাড়া আমি বাংলা উইকিপিডিয়ার একজন প্রশাসক।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 2

Not to bad

প্রথম মন্তব্যের জন্য ধন্যবাদ।

আমার টা কাজ করে না