Other Languages - HTML-picture exchanges - Asked By Bigboy on 03-Apr-12 08:30 AM

Can I please have HTML code for exchanging pictures on a web page.

Thank you
Abhinav Sejpal replied to Bigboy on 03-Apr-12 08:38 AM
Hello

you can do this using animated gif but the easy way is to us

java script this is the code:
< script language="JavaScript1.2">

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<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('<div style="position:relative;width:'+slidesh… id="canvas0" style="position:absolute;width:'+slidesh… id="canvas1" style="position:absolute;width:'+slidesh…
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<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='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<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…
curimageindex=(curimageindex<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='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

< /script>

You can also use Rich Javascript Lib like JQuery or else for Coding. Let me know if you need any other infromation.

Cheers\ Abhinav
Bigboy replied to Abhinav Sejpal on 03-Apr-12 09:30 AM
thanx