...

View Full Version : is it possible to use a GetElementById to set a style ?



MogVonKupo
07-09-2004, 04:38 AM
I'm presently working on a background changing thing... but i need a function for each picture. i think it might be possible to use variables and GetElementById to have only one function... do you think it's possible, and how?

here's the first two functions, basically all the other are the same with some slight differences...


function rotation01()
{
document.body.style.background='url("./aa/01.jpg")';
if(nb==1)
{
setTimeout('rotation01()',nextpic);
}
else
{
setTimeout('rotation02()',nextpic);
}
}

function rotation02()
{
document.body.style.background='url("./aa/02.jpg")';
if(nb==2)
{
setTimeout('rotation01()',nextpic);
}
else
{
setTimeout('rotation03()',nextpic);
}
}
the nb var is the max number of images, the nextpic var is the time for the next image to appear.

Any idea would be greatly appreciated.

coothead
07-09-2004, 05:48 AM
Hi there MogVonKupo,

Try it like this...

script

<script type="text/javascript">
<!--
var speed=2000;
count=0;

var bgrdImg=new Array();
bgrdImg[0]="image0.jpg";
bgrdImg[1]="image1.jpg";
bgrdImg[2]="image2.jpg";
bgrdImg[3]="image3.jpg";

function Rotation() {
document.getElementById('foo').style.background="url("+bgrdImg[count]+")";
count++;
if(count>bgrdImg.length-1) {
count=0;
}
setTimeout('Rotation()',speed);
}
onload=Rotation;
//-->
</script>
body

<body id="foo" >

coothead

MogVonKupo
07-09-2004, 07:38 PM
it's a solution, but isn't there any way not to declare any picture? like:


document.body.style.background="url(./aa/"+pic+".jpg)";

as it is now, it's not working, but it's probably just that I missed something...

By the way, pic is a variable representing a number.

(sorry if any sentence don't mke much sense, English isn't my first language...)

Willy Duitt
07-09-2004, 08:25 PM
If your images are simularly named and sequentially numbered:



<html>
<head>
<title>Post Load And Display Sequentially Numbered Images</title>
<BASE HREF="http://www.freewebs.com/foufou/">
<script type="text/javascript">
<!--// WRITTEN BY: WillyDuitt@hotmail.com 02/04/2004 //;
// PLEASE BEGIN BY ANSWERING THE FOLLOWING QUESTIONS! //;
// HOW MANY SEQUENTIAL IMAGES WOULD YOU LIKE TO SHOW? //;
var howMany = 4;
// USING QUOTES. WHAT IS THE PATH TO THE FIRST IMAGE? //;
var firstImage = 'eliza1.jpg';
// HOW MANY SECONDS BEFORE CHANGING IMAGES(.5 = ˝sec) //;
var speed = 5;

////////////////////////////////////////////////////////;
// GLOBAL VARIABLES NO NEED TO EDIT BEYOND THIS POINT //;
var startNumber = (/\d+(?=\.)/.exec(firstImage));
var lastNumber = (startNumber*1)+(howMany-1);
var nextImage = (startNumber);

function loadImages(){
for(var i=startNumber;i<=lastNumber;i++){
var postLoad = new Array();
postLoad[i] = new Image();
postLoad[i].src = firstImage.replace(/\d+(?=\.)/,i);
} newImage();
}

function newImage(){
if(nextImage > lastNumber){ nextImage = startNumber };
var image = firstImage.replace(/\d+(?=\.)/,nextImage);
document.body.style.background = 'url('+image+')';
setTimeout('newImage()',speed*1000);
nextImage++;
} onload = loadImages;
//-->
</script>
</head>

<body>
</body>
</html>


.....Willy

Edit: Fixed regular expression to only target numbers immediately prior to a dot (.)

MogVonKupo
07-09-2004, 09:19 PM
thanks, that's exactly what I was trying to do...
even if I don't understand a few parts of the code...

:thumbsup: :thumbsup:

MogVonKupo
07-09-2004, 09:46 PM
I just made this one out:


function rotation()
{
if(picnb!=nb)
{
picnb+=1;
}
else
{
picnb=1
};
if(picnb<100)
{
if(picnb<10)
{
var pic="./aa/00"+picnb+".jpg";
}
else
{
var pic="./aa/0"+picnb+".jpg";
}
}
else
{
var pic="./aa/0"+picnb+".jpg";
}
document.body.style.background='url('+pic+')';
setTimeout('rotation()',nextpic);
}

Anyway, thanks for your help^_^ even if my question wasn't really clear...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum