Thursday, August 2, 2012

Slide Images js


Slide Images js

Using java scripts you could create sliding image application for this I have used 3 Images called "Christina.jpg"
,"Jessica.jpg"&"Victoria.jpg". You could watch the Video of that image slide and scripts are as follows.



<body>
<style>
.textstyle {
    font-family:Arial;
    font-size: 9pt;
    color:#FFFFFF;
    background-color:#AAAAAA;
    text-align:center;
}
</style>
<script>
var imgname=new Array()
var imglink=new Array()
var message=new Array()
imgname[0]="Christina.jpg"
imgname[1]="Jessica.jpg"
imgname[2]="Victoria.jpg"
imglink[0]="http://wintekweb.blogspot.com/2012/08/add-additional-input-to-drop-down-js.html"
imglink[1]="http://wintekweb.blogspot.com/2012/07/auto-fill-same-type-of-inputs-js.html"
imglink[2]="http://wintekweb.blogspot.com/2012/07/word-and-character-counter-js.html"
message[0]="Christina Milian"
message[1]="Jessica Alba"
message[2]="Victoria Justice"
var imgwidth=256
var imgheight=164
var textheight=17
var pause=2000
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
    imgpreload[i]=new Image()
    imgpreload[i].src=imgname[i]
}
var pause=2000
var speed=20
var step=20
var i_loop=0
var i_image=0

var pos_left=0
var pos_top=0

function stretchimage() {
    if (i_loop<=imgwidth) {
        imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
        i_loop=i_loop+step
        var timer=setTimeout("stretchimage()",speed)
      }
    else {
        clearTimeout(timer)
        imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+imgwidth+"' src='"+imgname[i_image]+"' border='0'></a>"
        textcontainer.innerHTML=message[i_image]
        textcontainer.style.visibility="visible"
        var timer=setTimeout("shrinkimage()",pause)
    }
}

function shrinkimage() {
    if (i_loop>-step) {
        textcontainer.style.visibility="hidden"
        imgcontainer.innerHTML="<a href='"+imglink[i_image]+"' target='_blank'><img width='"+i_loop+"' src='"+imgname[i_image]+"' border='0'></a>"
        i_loop=i_loop-step
        var timer=setTimeout("shrinkimage()",speed)
      }
    else {
        clearTimeout(timer)
        changeimage()
    }
}

function changeimage() {
    i_loop=0
    i_image++
    if (i_image>imgname.length-1) {i_image=0}
       var timer=setTimeout("stretchimage()",pause)
}

function initiate() {
    document.getElementById('imgcontainer').style.left=pos_left
    document.getElementById('imgcontainer').style.top=pos_top
    changeimage()
}

document.write('<div id="roof" style="position:relative;width:'+imgwidth+';height:'+imgheight+'">')
document.write('<div id="imgcontainer" style="position:absolute;top:0px;left:0px;width:'+imgwidth+'px;height:'+imgheight+'px"></div>')
document.write('<div id="textcontainer" class="textstyle" style="position:absolute;top:'+imgheight+'px;left:0px;width:'+imgwidth+'px;height:'+textheight+'px;visibility:hidden"></div>')
document.write('</div>')
window.onload=onLoad=stretchimage
</script>
</body>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)