countdown with photos and then redirect 1

[paola13]

I'm looking for a script that display 6 pictures in orizontal step by step. When the sixth is shown then start the redirect function... Each pictures swap every 3 seconds, so this page is visible for 18 seconds...
Thanks

Ah! the pictures could stay in six cell with a different bgcolor

 

[Targol]

For timers issues, read my beautifull (LOL LOL LOL) FAQ : FAQ215-2670 . Water is not bad as long as it stays out human body ;-)

 

[paola13]

Targol sorry... but your link dosen't work... could you repost it?
Thanks so much

 

[paola13]

ok... is not true. Your link is ok. Thankyou again!

 

[paola13]

I read your faq, but i'm so bad in js... i didn'understand a good nothing!
Here is a simple countdown with a text area:

<script language=&quot;javascript&quot;>
var conto = 20*60;
function countdown {
conto--;
min = Math.floor(conto/60);
sec = conto - min*60;
str1 = string(min) + &quot;:&quot;;
if (sec<10) str1 += &quot;0&quot;+sec;
else str1 += sec;
document.NOMEFORM.NOMECAMPO.value = str1;
setTimeout (&quot;countdown()&quot;, 1000);
}
</string>

I have to change the &quot;object&quot; document.NOMEFORM.NOMECAMPO.value = str1; with a picture...
but also i have to add a swap function. So i think i have to build an array for my six pictures....
Help please

 

[Targol]

A little explain about my FAQ : setInterval is just the same as setTimeout except that setTimeout waits for the period provided as second param and then runs function provided as first param ONLY ONCE while setInterval runs the same UNTIL YOU STOP IT. For the rest of the faq, it writes lines to the HTML output to illustrate the using. May be you'll understand it better if you copy and paste the code to an HTML page on your machine and open it with browser.

For your pictures, what you can do is this : load ALL your pictures but hide them like this :

...
<TABLE BORDER=&quot;0px&quot; CELLSPACING=&quot;0px&quot; CELLPADDING=&quot;0px&quot;>
  <TR>
    <TD>
      <img id=&quot;img1&quot; src=&quot;./img1.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
    <TD>
      <img id=&quot;Img2&quot; src=&quot;./img2.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
    <TD>
      <img id=&quot;Img3&quot; src=&quot;./img3.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
    <TD>
      <img id=&quot;Img4&quot; src=&quot;./img4.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
    <TD>
      <img id=&quot;Img5&quot; src=&quot;./img5.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
    <TD>
      <img id=&quot;Img6&quot; src=&quot;./img6.gif&quot; style=&quot;display:hidden&quot;>
    </TD>
  </TR>
</TABLE>

At this point, all your images are loaded but hidden. then, in your timer function, do the following :

var imgToShow = 1;

function showImages() {
  var oIMG = document.getElementById("Img" + imgToShow);
  oIMG.style.display="inline";
  // or oIMG.style.display="block"; test what is better.
  imgToShow ++;
  if (imgToShow > 6) {
    // do here what you want to do after displaying the 6 img.
  } else {
    setTimeout ("showImages()", 1000);
  }
}

What you have to do for this to work is to call &quot;showImages()&quot; function on the &quot;onLoad&quot; event of body tag. Water is not bad as long as it stays out human body ;-)

 

[paola13]

thanks Targol
I'll try your script.
Could I post here if i have some problem?
Thanks again
Water is not bad as long as it stays out human body

 

[Targol]

Post here, I' ve got an e-mail notification on this thread. Water is not bad as long as it stays out human body ;-)

 

[paola13]

Thanks Targol... but i wrong something because the script doesn't work.
I find out in another forum this one. It works, but your script seems more simple and (if you want) i woul like to make it runs...

This is the script i find out:
<scripft language=&quot;javascript&quot;>
var max = 6; // numero immagini number images
var imma = new Array(max);
for(j=0; j<max; j++) {
imma[j] = new Image();
imma[j].src = &quot;imma&quot;+j;
}

var conto = 0;
function sost1() {
var dest = eval(&quot;imma&quot;+conto); // questa istruzione potrebbe non funzionare in qualche browser moderno
dest.src = &quot;imma&quot;+[conto]+&quot;.gif&quot;;
conto++;
if (conto >= max) {
location.href=&quot;

http://www.repubblica.it&quot;

} else {
setTimeout('sost1()', 1000); // richima dopo un secondo
}
}


</scrfipt>

They told me var dest = eval(&quot;imma&quot;+conto); could not run in new browser... do you know a sostitute for this string?
Thanks a lot for your kindness

 

[Targol]

Can you tell me where the script I gave raise an error ? Water is not bad as long as it stays out human body ;-)

 

[paola13]

The script runs without errors, but the &quot;pictures countdown&quot; doesn't work.
When i play the page in browser, all the images are not hidden. After a while (the time set in the script) the page redirect to another link.
I write the code I put in my htmlpage:

In the HEAD:
<scriDpt language=&quot;javascript&quot;>
var imgToShow = 1;

function showImages() {
var oIMG = document.getElementById(&quot;Img&quot; + imgToShow);
oIMG.style.display=&quot;inline&quot;;
// or oIMG.style.display=&quot;block&quot;; test what is better.
imgToShow ++ (I TRY BOTH);
if (imgToShow > 6) {
// do here what you want to do after displaying the 6 img.
location.href=&quot;

http://www.repubblica.it&quot;

} else {
setTimeout (&quot;showImages()&quot;, 1000);
}
}
</scrGipt>

in the BODY
onLoad=&quot;showImages()&quot;

iN THE TD:

etc...

Thanks a lot [afro2

 

[Targol]

a few questions :
-What browser are you using ?
-What are these chars that appear in your posts (&quot;scriDpt language ...>&quot;, &quot;</scrGipt>&quot ? Water is not bad as long as it stays out human body ;-)

 

[Targol]

I am a big donkey !!!!
Try :

<img id=&quot;Img2&quot; src=&quot;./img2.gif&quot; style=&quot;display:

none

">

.
You'll see it'll work better !!! Water is not bad as long as it stays out human body ;-)

 

[paola13]

don't say you are a big donkey...
I have internet explorer in my pc.. and the strage tags is my foult, because in some forum if you cut and past the exactly script, sometime it runs and you don't see nothing.
Now i try the new tags for td table.
thank alot and forgive my bad english!

 

[paola13]

It ruuuunssss!!!! Helpful Targol!! Thanksssss
I will press your replay as helpful/expert post!

 

[Targol]

Thanx for the star. For your english, I don't find it bad... but I'm French so mine shouldn't be a model. Water is not bad as long as it stays out human body ;-)

 

[paola13]

if you help me also this time i will give you another star (it sound so romantic!)
I notice the pictures moves... i would like they don't move.
how can i fix their positions?
In italy people like me are told &quot;peoople that break boxes&quot;...

 

[Targol]

What do you mean by &quot;they move&quot; ? Water is not bad as long as it stays out human body ;-)

 

[paola13]

they slide from right to left.
I put doifferent bgcolor in every td. I notice when one picture is display the table have the same bgcolor of the td with the first image display. When the second one appears the bgcolor of the table is alf red alf orange (bg color of td1 and td2) and so on.
I think is because the cell containing the pictures enlarge itself when no pictures around are shown... Could i try writing <td width=&quot;60&quot; height=&quot;60&quot;>?

 

[paola13]

ok Targol... i'm a big donkey! I have just to specify height and width of the cells!!
Thanks so much for everything!!!