Saturday, November 20, 2010

How to make pictures change automatically using HTML for my website?

Hey, I want to be able to have 4 pictures on my website and type HTML code so that every 3 seconds the picture changes, how do I do that? Thanks!How to make pictures change automatically using HTML for my website?
you can do this using animated gif but the easy way is to us


java script this is the code:





%26lt;script language=';JavaScript1.2';%26gt;





var slideshow_width='200px' //SET IMAGE WIDTH


var slideshow_height='350px' //SET IMAGE HEIGHT


var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)





var fadeimages=new Array()


//add yor images here add as you want by increasing the


//array like fadeimages[3]=www.yoursite.com/x.jpg


fadeimages[0]=';image1.jpg';


fadeimages[1]=';image2.jpg';


fadeimages[2]=';image3.jpg';





////NO need to edit beyond here/////////////





var preloadedimages=new Array()


for (p=0;p%26lt;fadeimages.length;p++){


preloadedimages[p]=new Image()


preloadedimages[p].src=fadeimages[p]


}





var ie4=document.all


var dom=document.getElementById





if (ie4||dom)


document.write('%26lt;div style=';position:relative;width:'+slidesh鈥? id=';canvas0'; style=';position:absolute;width:'+slidesh鈥?id=';canvas1'; style=';position:absolute;width:'+slidesh鈥?br>

else


document.write('%26lt;img name=';defaultslide'; src=';'+fadeimages[0]+'';%26gt;')





var curpos=10


var degree=10


var curcanvas=';canvas0';


var curimageindex=0


var nextimageindex=1








function fadepic(){


if (curpos%26lt;100){


curpos+=10


if (tempobj.filters)


tempobj.filters.alpha.opacity=curpos


else if (tempobj.style.MozOpacity)


tempobj.style.MozOpacity=curpos/100


}


else{


clearInterval(dropslide)


nextcanvas=(curcanvas==';canvas0';)? ';canvas0'; : ';canvas1';


tempobj=ie4? eval(';document.all.';+nextcanvas) : document.getElementById(nextcanvas)


tempobj.innerHTML='%26lt;img src=';'+fadeimages[nextimageindex]+'';%26gt;'


nextimageindex=(nextimageindex%26lt;fadeima鈥?nextimageindex+1 : 0


setTimeout(';rotateimage()';,pause)


}


}





function rotateimage(){


if (ie4||dom){


resetit(curcanvas)


var crossobj=tempobj=ie4? eval(';document.all.';+curcanvas) : document.getElementById(curcanvas)


crossobj.style.zIndex++


var temp='setInterval(';fadepic()';,50)'


dropslide=eval(temp)


curcanvas=(curcanvas==';canvas0';)? ';canvas1'; : ';canvas0';


}


else


document.images.defaultslide.src=fadei鈥?br>

curimageindex=(curimageindex%26lt;fadeimage鈥?curimageindex+1 : 0


}





function resetit(what){


curpos=10


var crossobj=ie4? eval(';document.all.';+what) : document.getElementById(what)


if (crossobj.filters)


crossobj.filters.alpha.opacity=curpos


else if (crossobj.style.MozOpacity)


crossobj.style.MozOpacity=curpos/100


}





function startit(){


var crossobj=ie4? eval(';document.all.';+curcanvas) : document.getElementById(curcanvas)


crossobj.innerHTML='%26lt;img src=';'+fadeimages[curimageindex]+'';%26gt;'


rotateimage()


}





if (ie4||dom)


window.onload=startit


else


setInterval(';rotateimage()';,pause)





%26lt;/script%26gt;How to make pictures change automatically using HTML for my website?
HTML can't do this. You need JavaScript or something else more powerful.
Well you can download a free trial of an animation program such as Animation Shop 3, which you might be able to find on download.com. You'll then have to animate your self and save it as a .gif


Or


You can create an album on photobucket.com and make 4 slide shows and it will give you an HTML code for it.

No comments:

Post a Comment