Friday, 19 October 2012

continuous marquee in html


================================================================================
Marquee Without Spacing--------->
=================================================================================

<script type="text/javascript" src="../js/lightbox.js"></script>
<style type="text/css">
    #outerCircleText {
    font-style: italic;
    font-weight: bold;
    font-family: 'comic sans ms', verdana, arial;
    color: #FFFFFF;

    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type="text/javascript">
<!--
// Jeff
// www.huntingground.freeserve.co.uk
// ********** User Defining Area **********
data=[
["images/1.gif","Alt / Title text for image 1","1.gif"],
["images/2.gif","Alt / Title text for image 2","2.gif"],
["images/3.gif","Alt / Title text for image 3","3.gif"],
["images/4.gif","Alt / Title text for image 4","4.gif"],
["images/5.gif","Alt / Title text for image 5","5.gif"],
["images/6.gif","Alt / Title text for image 6","6.gif"],
["images/7.gif","Alt / Title text for image 7","7.gif"],
["images/8.gif","Alt / Title text for image 8","8.gif"],
["images/9.gif","Alt / Title text for image 9","9.gif"],
["images/10.gif","Alt / Title text for image 10","10.gif"],
["images/11.gif","Alt / Title text for image 11","11.gif"],
["images/12.gif","Alt / Title text for image 12","12.gif"],
["images/13.gif","Alt / Title text for image 13","13.gif"],
["images/14.gif","Alt / Title text for image 14","14.gif"],
["images/15.gif","Alt / Title text for image 15","15.gif"],
["images/16.gif","Alt / Title text for image 16","16.gif"],
["images/17.gif","Alt / Title text for image 17","17.gif"],
["images/18.gif","Alt / Title text for image 18","18.gif"],
["images/19.gif","Alt / Title text for image 19","19.gif"],
["images/20.gif","Alt / Title text for image 20","20.gif"],
["images/21.gif","Alt / Title text for image 21","21.gif"],
["images/22.gif","Alt / Title text for image 22","22.gif"],
["images/23.gif","Alt / Title text for image 23","23.gif"],
["images/24.gif","Alt / Title text for image 24","24.gif"],
["images/25.gif","Alt / Title text for image 25","25.gif"],
["images/26.gif","Alt / Title text for image 26","26.gif"],
["images/27.gif","Alt / Title text for image 27","27.gif"],
["images/28.gif","Alt / Title text for image 28","28.gif"],
["images/29.gif","Alt / Title text for image 29","29.gif"],
["images/30.gif","Alt / Title text for image 30","30.gif"],
["images/31.gif","Alt / Title text for image 31","31.gif"],
["images/32.gif","Alt / Title text for image 32","32.gif"],// no comma at end of last index
]
imgPlaces=39 // number of images visible
imgWidth=22 // width of the images
imgHeight=22 // height of the images
imgSpacer=3 // space between the images
dir=0 // 0 = left, 1 = right
newWindow=1 // 0 = Open a new window for links 0 = no  1 = yes
// ********** End User Defining Area **********
moz=document.getElementById&&!document.all
step=1
timer=""
speed=50
nextPic=0
initPos=new Array()
nowDivPos=new Array()
function initHIS3(){
for(var i=0;i<imgPlaces+1;i++){ // create image holders
newImg=document.createElement("IMG")
newImg.setAttribute("id","pic_"+i)
newImg.setAttribute("src","")
newImg.style.position="absolute"
newImg.style.width=imgWidth+"px"
newImg.style.height=imgHeight+"px"
newImg.style.border=0
newImg.alt=""
newImg.i=i
//newImg.onclick=function(){his3Win(data[this.i][2])}
document.getElementById("display_area").appendChild(newImg)
}
containerEL=document.getElementById("his3container")
displayArea=document.getElementById("display_area")
pic0=document.getElementById("pic_0")
containerBorder=(document.compatMode=="CSS1Compat"?0:parseInt(containerEL.style.borderWidth)*2)
containerWidth=(imgPlaces*imgWidth)+((imgPlaces-1)*imgSpacer)
containerEL.style.width=containerWidth+(!moz?containerBorder:"")+"px"
containerEL.style.height=imgHeight+(!moz?containerBorder:"")+"px"
displayArea.style.width=containerWidth+"px"
displayArea.style.clip="rect(0,"+(containerWidth+"px")+","+(imgHeight+"px")+",0)"
displayArea.onmouseover=function(){stopHIS3()}
displayArea.onmouseout=function(){scrollHIS3()}
imgPos= -pic0.width
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)
if(dir==0){imgPos+=pic0.width+imgSpacer} // if left
initPos[i]=imgPos
if(dir==0){currentImage.style.left=initPos[i]+"px"} // if left
if(dir==1){ // if right
document.getElementById("pic_"+[(imgPlaces-i)]).style.left=initPos[i]+"px"
imgPos+=pic0.width+imgSpacer
}
if(nextPic==data.length){nextPic=0}
currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
//currentImage.onclick=function(){his3Win(data[this.i][2])} //By This Click we can open new window on image....
nextPic++
}
scrollHIS3()
}
timer=""
function scrollHIS3(){
clearTimeout(timer)
for(var i=0;i<imgPlaces+1;i++){
currentImage=document.getElementById("pic_"+i)
nowDivPos[i]=parseInt(currentImage.style.left)
if(dir==0){nowDivPos[i]-=step}
if(dir==1){nowDivPos[i]+=step}
if(dir==0&&nowDivPos[i]<= -(pic0.width+imgSpacer) || dir==1&&nowDivPos[i]>containerWidth){
if(dir==0){currentImage.style.left=containerWidth+imgSpacer+"px"}
if(dir==1){currentImage.style.left= -pic0.width-(imgSpacer*2)+"px"}
if(nextPic>data.length-1){nextPic=0}
currentImage.src=data[nextPic][0]
currentImage.alt=data[nextPic][1]
currentImage.i=nextPic
currentImage.onclick=function(){his3Win(data[this.i][2])}
nextPic++
}
else{
currentImage.style.left=nowDivPos[i]+"px"
}
}
timer=setTimeout("scrollHIS3()",speed)
}
function stopHIS3(){
clearTimeout(timer)
}
function his3Win(loc){
if(loc==""){return}
if(newWindow==0){
location=loc
}
else{
//window.open(loc)
newin=window.open(loc,'win1','left=1,top=1,width=1,height=1') // use for specific size and positioned window
newin.focus()
}
}
// add onload="initHIS3()" to the opening BODY tag
// -->
</script>

<body onload="initHIS3();">

 <table>
        <tr>
        <td>   
       
      <DIV id="his3container_2" style="position:relative; width:10px;height:10px; border:1px solid red;overflow:hidden">
      <div id="display_area_2" style="position:absolute; left:10; top:10; width:10px; height:10px; clip:rect(0,0,0,0)"></div>
        </DIV> 
      </td>
      </tr>
      </table>

No comments:

Post a Comment