JQuery_Part 4_Animated-Gif ইমেল সংযোজন
Animated-Gif ইমেল সংযোজন
খুব সহজেই সাইটে animated-Gif
ইমেজ সংযোজন করা সম্ভব।
এখন আমরা আমাদের footer.php ফাইলে Java Script কোড সংযোজন
করে একটি এনিমেন্টেড ইমেজকে সাইটে সংযোজন
করবো।
- footer.
php ফাইলটি খুলুন। এবং
যেখানে </body> ট্যাগ শেষ
হচ্ছে ঠিক তার উপরের লাইনে কার্সর রাখুন।
- এখন JS & JQ Project ফোল্ডার থেকে animated – Gif.tex ফাইলটি খুলে সব টুকু কোড কপি / পেষ্ট করুন বা নিচের মত সরাসরি কোডিং লিখে দিন।
- তখন image দেওয়া থেকে batterfly.gif ও batterfly.Gif ইমেজ ২ টি mysite ফোল্ডারের root এ কপি করে দিন।
<script
language="JavaScript1.2">
var Ymax=8; //MAX # OF
PIXEL STEPS IN THE "X" DIRECTION
var Xmax=8; //MAX # OF
PIXEL STEPS IN THE "Y" DIRECTION
var Tmax=10000; //MAX # OF MILLISECONDS BETWEEN
PARAMETER CHANGES
//FLOATING IMAGE URLS FOR EACH
IMAGE. ADD OR DELETE ENTRIES. KEEP ELEMENT NUMERICAL ORDER STARTING WITH
"0" !!
var floatimages=new Array();
floatimages[0]='butterfly.gif';
floatimages[1]='butterfly.gif';
floatimages[2]='butterfly2.gif';
floatimages[3]='butterfly2.gif';
//*********DO NOT EDIT
BELOW***********
var NS4 =
(navigator.appName.indexOf("Netscape")>=0 &&
parseFloat(navigator.appVersion) >= 4 &&
parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true
: false;
var NS6 =
(parseFloat(navigator.appVersion) >= 5 &&
navigator.appName.indexOf("Netscape")>=0 )? true: false;
var wind_w, wind_h, t='',
IDs=new Array();
for(i=0;
i<floatimages.length; i++){
t+=(NS4)?'<layer name="pic'+i+'"
visibility="hide" width="10" height="10"><a
href="javascript:hidebutterfly()">' : '<div
id="pic'+i+'" style="position:absolute;
visibility:hidden;width:10px; height:10px"><a
href="javascript:hidebutterfly()">';
t+='<img
src="'+floatimages[i]+'" name="p'+i+'"
border="0">';
t+=(NS4)?
'</a></layer>':'</a></div>';
}
document.write(t);
function moveimage(num){
if(getidleft(num)+IDs[num].W+IDs[num].Xstep
>= wind_w+getscrollx())IDs[num].Xdir=false;
if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;
if(getidtop(num)+IDs[num].H+IDs[num].Ystep
>= wind_h+getscrolly())IDs[num].Ydir=false;
if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;
moveidby(num, (IDs[num].Xdir)?
IDs[num].Xstep : -IDs[num].Xstep ,
(IDs[num].Ydir)? IDs[num].Ystep: -IDs[num].Ystep);
}
function getnewprops(num){
IDs[num].Ydir=Math.floor(Math.random()*2)>0;
IDs[num].Xdir=Math.floor(Math.random()*2)>0;
IDs[num].Ystep=Math.ceil(Math.random()*Ymax);
IDs[num].Xstep=Math.ceil(Math.random()*Xmax)
setTimeout('getnewprops('+num+')',
Math.floor(Math.random()*Tmax));
}
function getscrollx(){
if(NS4 || NS6)return
window.pageXOffset;
if(IE4)return
document.body.scrollLeft;
}
function getscrolly(){
if(NS4 || NS6)return
window.pageYOffset;
if(IE4)return document.body.scrollTop;
}
function getid(name){
if(NS4)return
document.layers[name];
if(IE4)return
document.all[name];
if(NS6)return
document.getElementById(name);
}
function moveidto(num,x,y){
if(NS4)IDs[num].moveTo(x,y);
if(IE4 || NS6){
IDs[num].style.left=x+'px';
IDs[num].style.top=y+'px';
}}
function getidleft(num){
if(NS4)return IDs[num].left;
if(IE4 || NS6)return
parseInt(IDs[num].style.left);
}
function getidtop(num){
if(NS4)return IDs[num].top;
if(IE4 || NS6)return
parseInt(IDs[num].style.top);
}
function moveidby(num,dx,dy){
if(NS4)IDs[num].moveBy(dx, dy);
if(IE4 || NS6){
IDs[num].style.left=(getidleft(num)+dx)+'px';
IDs[num].style.top=(getidtop(num)+dy)+'px';
}}
function getwindowwidth(){
if(NS4 || NS6)return
window.innerWidth;
if(IE4)return document.body.clientWidth;
}
function getwindowheight(){
if(NS4 || NS6)return
window.innerHeight;
if(IE4)return
document.body.clientHeight;
}
function init(){
wind_w=getwindowwidth();
wind_h=getwindowheight();
for(i=0;
i<floatimages.length; i++){
IDs[i]=getid('pic'+i);
if(NS4){
IDs[i].W=IDs[i].document.images["p"+i].width;
IDs[i].H=IDs[i].document.images["p"+i].height;
}
if(NS6 || IE4){
IDs[i].W=document.images["p"+i].width;
IDs[i].H=document.images["p"+i].height;
}
getnewprops(i);
moveidto(i ,
Math.floor(Math.random()*(wind_w-IDs[i].W)),
Math.floor(Math.random()*(wind_h-IDs[i].H)));
if(NS4)IDs[i].visibility =
"show";
if(IE4 ||
NS6)IDs[i].style.visibility = "visible";
startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);
}}
function hidebutterfly(){
for(i=0;
i<floatimages.length; i++){
if (IE4)
eval("document.all.pic"+i+".style.visibility='hidden'")
else if (NS6)
document.getElementById("pic"+i).style.visibility='hidden'
else if (NS4)
eval("document.pic"+i+".visibility='hide'")
clearInterval(startfly)
}
}
if (NS4||NS6||IE4){
window.onload=init;
window.onresize=function(){
wind_w=getwindowwidth(); wind_h=getwindowheight(); }
}
</script>
ব্যাস ব্রাউজারে খুলুন
নিচের মত ইভেন্ট পাওয়া যাবে। অন্য ইমেজ দিয়েও কাজটি করা যেত।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
part2_ইমেজ Expand Effect সংযোগ করা
part3_Element Fader তৈরী করা
part4_Animated-Gif ইমেল সংযোজন
part5_Slide Show সংযোজন
