Search HouseOfScripts.com

 

All Scripts        JavaScripts        ASP Scripts        Other Scripts

 

  How to scroll pictures using JavaScript. asp, send, email, cdonts, link, recordset, hyper, hyperlink, create, list, box, dependant, dynamic

Friend of mine found this script on www.a1javascripts.com and we think this is cool. You can see how it works. If you move mouse on the picture, it will stop scrolling.

It takes a few steps in order to set it up.

1. HEAD

<SCRIPT LANGUAGE="JavaScript">
//Script submitted by vasile birsan
//http://members.home.net/v.birsan/
//Displayed on www.a1javascripts.com/
//slider's width
var swidth=102


//slider's height
var sheight=82

//slider's speed;
var sspeed=2


var imagef=''


//images: change to your own

var leftimage=new Array();
leftimage[0]='<img src="images/flamingo.jpg" width=100 height=80 alt="Flamingo" border=1>'
leftimage[1]='<img src="images/macaw1.jpg" width=100 height=80 border=1>'
leftimage[2]='<img src="images/macaw2.jpg" width=100 height=80 border=1>'

for (mi=0;mi<leftimage.length;mi++)
imagef=imagef+leftimage[mi]


function start(){
if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
initial6(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
intialslide()
}
}
function intialslide(){
document.slider1.document.slider2.document.write('<nobr>'+imagef+'</nobr>')
document.slider1.document.slider2.document.close()
thel=document.slider1.document.slider2.document.width
document.slider1.document.slider2.left-=thel
sslide()
}
function sslide(){
if (document.slider1.document.slider2.left>=thel*(-1)){
document.slider1.document.slider2.left-=sspeed
setTimeout("sslide()",100)
}
else{
document.slider1.document.slider2.left=swidth
sslide()
}
}
function initial6(whichdiv){
tdiv6=eval(whichdiv)
tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>')
tdiv6.style.left=swidth
thel=swidth*leftimage.length
scroll6()
}
function scroll6(){
if (parseInt(tdiv6.style.left)>=thel*(-1)){
tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed
setTimeout("scroll6()",100)
}
else{
tdiv6.style.left=swidth
scroll6()
}
}
//You might run into a position problem within the page, using either
//NS4.x or NS6.x. To correct this use the coordinates: 'left=value',
//'top=value' within ilayer/layer tags or 'position:relative/absolute;
//left:value;top:value;' within NS6's div tags.
//Those values can be either positive or negative!
//Make sure you've got the onload='...;' within body tag but without
//takeFocus(); there!
</SCRIPT>

2. BODY

<body onload="start()">

3. Place inside the body where you want it to display.

<SCRIPT LANGUAGE="JavaScript">
if (document.all){
document.write('<marquee id="slidere" scrollAmount=2 style="width:102;height:82;">'+imagef+'</marquee>')
slidere.onmouseover=new Function("slidere.scrollAmount=0")
slidere.onmouseout=new Function("if (document.readyState=='complete') slidere.scrollAmount=2")
}
if (document.layers){
document.write('<ilayer width=102 height=82 name="slider1" bgcolor="white" visibility=hide>')
document.write('<layer name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=2">')
document.write('</layer>')
document.write('</ilayer>')
}
if (document.getElementById&&!document.all){
document.write('<div style="position:absolute;width:102;height:82;clip:rect(0 102 82 0);">')
document.write('<div id="slider" style="position:relative;width:&{swidth};" onMouseover="sspeed=0;" onMouseout="sspeed=2">')
document.write('</div></div>')
}
</script>

top

 

 


Home       Scripts       Active WebTools       Web Templates       Forum       Tools        Hosting       Questions/Comments       Add/Request