Friday, August 3, 2012

Image Rotation JS


Image Rotation JS

You have ability of rotating few images using java scripts.I have created folder named pics in in web root directory(Xampp it is htdocs) then added 4 images img1.img2,img3 and img4 and created following js file.


<body>
<style>
.textstyle {
position:absolute;
visibility:visible;
border-style:solid;
border-width:2px;
border-color:#EEEEEE;
font-family:Arial;
font-size:8pt;
color:#FFFFFF;
text-align:center;
background-color:#CCCCCC;
top:-1000px;
}
</style>

<script>
var rotatingimage=new Array()
var rotatingtext=new Array()
var rotatinglink=new Array()
rotatingimage[0]="img1.jpg"
rotatingimage[1]="img2.jpg"
rotatingimage[2]="img3.jpg"
rotatingimage[3]="img4.jpg"
rotatingtext[0]="Sea Fish1"
rotatingtext[1]="Sea Fish2"
rotatingtext[2]="Sea Fish3"
rotatingtext[3]="Sea Fish4"
rotatinglink[0]="map5.html"
rotatinglink[1]="map2.html"
rotatinglink[2]="http://www.hotscripts.com"
rotatinglink[3]="http://www.hotscripts.com"
var circlewidth=420
var circleheight=240
var imgwidth=150
var imgheight=90
var textboxheight=17
var bgimg="beach.jpg"
var displaymax=7
var step=0.02;
var zoomfactor=2;
var imgpadding=10
var maxopacity=new Array()
var i_imgcounter=0
var segment=360/(displaymax);
var decrement=0;
var op
var tmr
var opacitystep=Math.round(100/circleinnerheight)
var zoomobj
var twidth
var theight
var windowwidth
var windowheight
var circleinnerwidth=circlewidth-(imgwidth+2*imgpadding)
var circleinnerheight=circleheight-(imgheight+2*imgpadding)
circleinnerwidth=circleinnerwidth/2
circleinnerheight=circleinnerheight/2

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0
var ie=document.all?1:0

var preloadedimages=new Array()
for (i=0;i<rotatingimage.length;i++){
    preloadedimages[i]=new Image()
    preloadedimages[i].src=rotatingimage[i]
}

for (i=0;i<displaymax;i++) {
    maxopacity[i]=1
}

function getpagesize() {
    windowwidth=parseInt(document.body.clientWidth)
    windowheight=parseInt(document.body.clientHeight)
    twidth=Math.floor(circleinnerwidth)
    theight=Math.floor(circleinnerheight)
    i_imgcounter=0
   
    for (i=0; i<displaymax; i++) {
        var thisspan=eval("document.getElementById('span"+i+"').style")
        thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";
        thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
        thisspan.zIndex=parseInt(thisspan.top)

        op=parseInt(100/circleinnerheight*(parseInt(thisspan.top)*0.5))
        document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
    document.getElementById('span'+i).style.visibility="visible"
            maxopacity[i]=-1
            i_imgcounter++
        if (i_imgcounter>=rotatingimage.length) {
            i_imgcounter=0
        }
    }
   
    rotatetext()
}

function rotatetext() {
    for (i=0; i<displaymax; i++) {
        var thisspan=eval("document.getElementById('span"+i+"').style")
        thisspan.left=(twidth*Math.sin(decrement+i*segment*Math.PI/180)+circleinnerwidth+imgpadding)+"px";
        thisspan.top=(theight*Math.cos(decrement+i*segment*Math.PI/180)+circleinnerheight+imgpadding)+"px";
        thisspan.zIndex=parseInt(thisspan.top)

        op=parseInt((100/circleinnerheight*(parseInt(thisspan.top)*0.5))-imgpadding)
       
        if (op<5 && maxopacity[i]==1) {
            if (i_imgcounter>=rotatingimage.length) {
                i_imgcounter=0
            }
            document.getElementById('span'+i).innerHTML="<a href='"+rotatinglink[i_imgcounter]+"'><img border=0 width="+imgwidth+" src='"+rotatingimage[i_imgcounter]+"' id='im"+i_imgcounter+"' onMouseover='stoprotating(this)' onMouseout='restartrotating()'></a><br>"+rotatingtext[i_imgcounter]
    document.getElementById('span'+i).style.visibility="visible"
            maxopacity[i]=-1
            i_imgcounter++
        }
        if (op>90) {
            maxopacity[i]=1
        }
   
        if (ie) {
            var thisfilter=eval("document.getElementById('span"+i+"')")
            thisfilter.filters.alpha.opacity=op
        }
        else {
            var thisfilter=eval("document.getElementById('span"+i+"').style")
            thisspan.opacity=op/100
        }
    }
    decrement-=step;
    tmr=setTimeout('rotatetext()', 50);
}

function stoprotating(thisobj) {
    clearTimeout(tmr)
    zoomobj=thisobj
    document.getElementById(zoomobj.id).style.width=(zoomfactor*imgwidth)+"px"
    document.getElementById(zoomobj.parentNode.parentNode.id).style.width=(zoomfactor*imgwidth)+"px"
    zoomobj.parentNode.parentNode.style.zIndex=9999
    if (ie) {
        zoomobj.parentNode.parentNode.filters.alpha.opacity=100
    }
    else {
        zoomobj.parentNode.parentNode.style.opacity=1
    }
}

function restartrotating() {
    document.getElementById(zoomobj.id).style.width=imgwidth+"px"
    document.getElementById(zoomobj.parentNode.parentNode.id).style.width=imgwidth+"px"
    rotatetext()
}


document.write('<div id="roof" style="position:relative;width:'+circlewidth+'px;height:'+(circleheight+textboxheight)+'px;">')
if (bgimg) {
    document.write('<img src="'+bgimg+'" width="'+circlewidth+'" height="'+(circleheight+textboxheight)+'">')
}
for (i=0;i<displaymax;i++) {
    document.write("<div id='span"+i+"' class='textstyle' style='filter:alpha(opacity=80);opacity:0.8;width:"+imgwidth+"px;visibility:hidden'></div>");
    i_imgcounter++
    if (i_imgcounter>=rotatingimage.length) {
        i_imgcounter=0
    }
}
document.write('</div>');
window.onload=getpagesize;
</script>

</body>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)