Kontinuerlig skift af billede

Husk at precache billeder.. se hvordan i min HTML reference

http://viperine.jaha.dk

Nu er det ikke der problemet ligger. Selvfølgelig i den endelige udgave skal billederne preloades, men nu er det scripted der volder kvaler:)

bgo

afslut din function med
window.setTimeout(animateText,2000);
og kald udenfor funktionen:
onload = animateText;
og slet din onload i BODY

cirka sådan
<script language=JavaScript>
var timerhandle = 0;
function animateText() {
  window.clearTimeout(timerhandle);
  var imageText = document.all("animtext").src;
  if (imageText = "../erhvervsskolen/foto/text/knap-erhvervskursuscentret.gif") {
      document.all("animtext").src="../erhvervsskolen/foto/text/knap-erhvervsskolen.gif";
  } else {
        if (imageText = "../erhvervsskolen/foto/text/knap-erhvervsakademiet.gif") {
            document.all("animtext").src="../erhvervsskolen/foto/text/knap-erhvervskursuscentret.gif";
        } else {
            if (imageText = "../erhvervsskolen/foto/text/knap-erhvervsgymnasiet.gif") {
                  document.all("animtext").src="../erhvervsskolen/foto/text/knap-erhvervsakademiet.gif";
            } else {
                  if (imageText = "../erhvervsskolen/foto/text/knap-erhvervsskolen.gif") {
                      document.all("animtext").src="../erhvervsskolen/foto/text/knap-erhvervsgymnasiet.gif";
                  }
            }
        }
  }
  timerhandle = window.setTimeout(animateText,2000);
}
onload = animateText;
onunload = function() { window.clearTimeout(timerhandle); }
</script>

og bør det ikke være
document.images("animtext").
og ikke
document.all("animtext").
kom jeg lige til at se

maddog> Undskyld, jeg så først dit svar nu. Jeg kan ikke se nærmere på det før iaften, og kan måske først gi' tilbagemelding imorgen.

bgo

oki doki.

... Og så laver du den ældste JavaScript-fejl nogensinde:

Du glemmer, at man skal bruge logiske operatorer i sammenligninger, dvs. at du skal skrive:

if (imageText == "blablabla") //OSV.

det så jeg slet ikke efter.

<script language=JavaScript>
var timerhandle = 0;
var picfolder = "../erhvervsskolen/foto/text/";
var theimg = document.images("animtext");
var counter = 0;
var pics = ["knap-erhvervskursuscentret.gif","knap-erhvervskursuscentret.gif","knap-erhvervsakademiet.gif","knap-erhvervsgymnasiet.gif"]
function animateText() {
  window.clearTimeout(timerhandle);
  document.images("animtext").src = picfolder+pics[counter];
  counter++;
  if (counter >= pics.length) counter = 0;
  timerhandle = window.setTimeout(animateText,2000);
}
onload = animateText;
onunload = function() { window.clearTimeout(timerhandle); }
</script>

så kan du tilføje billeder på forgodt befindende og ligge dem i hvilken folder du vil. det andet var for uoverskueligt.

Skal du ikke lave pics til et array?

var pics = ["knap-erhvervskursuscentret.gif","knap-erhvervsakademiet.gif","knap-erhvervsgymnasiet.gif","knap-erhvervsskolen.gif"]
jeg ved ikke om rækkefølgen er rigtig.

var pics = new Array("knap-erhvervskursuscentret.gif","knap-erhvervsakademiet.gif","knap-erhvervsgymnasiet.gif","knap-erhvervsskolen.gif");

Er det ikke sådan?

de to ting er identiske. jeg har ikke hørt om en browser der ikke forstod 'shorthand' arrays, men det du skriver er efter bogen.

Ja, det virker sgu...

Så har du lært mig noget nyt i dag, Maddog! :)

/me smiler stolt

Både den uden og den med array virker fortrinligt:) Og jeg fatter hvad der foregår i dem:)

Med hensyn til document.all vs. document.images må jeg indrømme at den sidste kendte jeg ikke så meget til, men vidste den første virkede i IE. Den sidste jo nok bedre at bruge, så slipper jeg (forhåbentligt) for at lave et browser check.

Grunden til jeg havde brug for det her script var, at vi havde et gammelt script lavet af en eller anden skummel html-editor som udførte det her. Det virkede da også fint, bare ikke i Opera. Scriptet var fuldstændig vanvittigt lavet, fuld af, hvad jeg kunne se, unødige ting, og så stort og omfattende at jeg ikke kunne hitte hoved eller hale i det så jeg kunne finde fejlen.

Så selvom jeg er absolut begynder på JavaScript området, besluttede jeg mig for selv at gå igang fra bunden. Og jeg kan se på den første, at selvom jeg stadig har meget at lære, så er jeg da ikke helt galt på den:))

Mange tak for hjælpen:)

bgo

det er ikke noget problem makker. jeg er selv fra netscape-land, så jeg har aldrig skrevet linjen document.al ... damn der var jeg lige ved at gøre det :D.
det der sker er at funktionen nu er recursiv (eller pseudo-recursiv) idet den kontinuerligt kalder sig selv hvert anden sekund. det betyder at du kan starte den med et funktions kald i stedet for et udtryk.
på godt dansk. det virker bedre.

Nu har jeg rigtig fået testet det af og det virker fint i IE, men i NS står den bare stille, og i Opera kan den ikke finde ud af det (næsten)  ordentligt før jeg har haft musen over en mouseover-event.

Hele html'en ser iøjeblikket ud som følger (kan ses i aktion med pics på www.selandia-ceu.dk/selandia/toptester.html):

<html>

    <head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Selandia - Center for Erhvervsuddannelse</title>
<script><!--
var timerhandle = 0;
var picfolder = "../erhvervsskolen/foto/text/";
var solfolder = "../erhvervsskolen/foto/";
var theimg = document.images("animtext");
var counter = 0;
var pics = ["knap-erhvervsskolen.gif","knap-erhvervsgymnasiet.gif","knap-erhvervsakademiet.gif","knap-erhvervskursuscentret.gif"]

function solEvent(sol,action){

if (action=="in"){
window.clearTimeout(timerhandle);
document.images("forklartext").src = picfolder+pics[sol];
document.images("knap"+sol).src = solfolder+"knap-groen.gif";
}
if (action=="out"){
timerhandle = window.setTimeout(animateText,5000);
document.images("knap"+sol).src = solfolder+"knap-gul.gif";
}

}

function animateText() {
  window.clearTimeout(timerhandle);
  document.images("forklartext").src = picfolder+pics[counter];
  counter++;
  if (counter >= pics.length) counter = 0;
  timerhandle = window.setTimeout(animateText,5000);
}
onload = animateText;
onunload = function() { window.clearTimeout(timerhandle); }

// --></script>

<link rel="stylesheet" type="text/css" href="../css/typografi.css">
<base target="_self">
<script language="JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>

    <body bgcolor="#ffffff" leftmargin="0" marginwidth="0" topmargin="0" marginheight="0">
       
   
<div id="Layer1" style="position:absolute; left:0px; top:0px; width:221px; height:92px; z-index:1"><img src="../foto/bg-top2.jpg" width="1024" height="126"></div>
<div id="Layer2" style="position:absolute; left:0px; top:0px; width:345px; height:145px; z-index:2">
  <table width="363" border="0" cellpadding="0" cellspacing="0">
            <tr height="36">
                <td height="36" width="10"></td>
                <td height="36"></td>
            </tr>
            <tr height="49">
                <td valign="top" align="left" width="10" rowspan="2"></td>
                <td valign="middle" height="49">
                    <div align="left">
                        <table border="0" cellpadding="0" cellspacing="2" height="48">
                            <tr>
                                <td valign="bottom" align="left" width="37"><a href="../erhvervsskolen/top.html"><img src="../foto/knap-gul.gif" name="knap0" border="0" alt="Erhvervsskolen" width="39" height="39" onmouseover="solEvent(0,'in')" onmouseout="solEvent(0,'out')"></a></td>
                                <td valign="top" align="left" width="37"><a href="../erhvervsskolen/top.html"><img src="../foto/knap-gul.gif" width="39" height="39" name="knap1" border="0" alt="erhvervsgymnasiet" onmouseover="solEvent(1,'in')" onmouseout="solEvent(1,'out')"></a></td>
                                <td valign="top" align="left" width="37"><a href="../erhvervsskolen/top.html"><img src="../foto/knap-gul.gif" width="39" height="39" name="knap2" border="0" alt="erhvervsakademiet" onmouseover="solEvent(2,'in')" onmouseout="solEvent(2,'out')"></a></td>
                                <td valign="bottom" align="left" width="37"><a href="../erhvervsskolen/top.html"><img src="../foto/knap-gul.gif" width="39" height="39" name="knap3" border="0" alt="erhvervskursus" onmouseover="solEvent(3,'in')" onmouseout="solEvent(3,'out')"></a></td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
            <tr height="22">
                <td height="22" valign="bottom" align="left">
                    <div align="left">
                        <img src="../erhvervsskolen/foto/text/knap-erhvervsskolen.gif" width="347" height="22" name="forklartext" border="0"></div>
                </td>
            </tr>
        </table>
        <p></p>
</div>
</body>

</html>

Problemet er der også uden solEvent...

bgo

hvad er det du vil?

I NS skifter billedet ikke. Det kører fint i IE, men af en eller anden grund ikke i NS. Har du nogen idé til hvorfor??

bgo

nej det har jeg godt nok ikke. det skulle virke. det vil sige at animationsdelen skulle virke. dine mouseovers virker jo heller ikke. så der er noget helt galt et eller andet sted. jeg har ikke tid i dag desværre.

Det er bare helt ok:)

bgo

prøv at hør her. fejlen er IKKE så vidt jeg kan se relateret til scriptet som sådan. snarere en HTML fejl. det kan du jo ligeså godt nærlæse som jeg kan.
test altid løbende (hele tiden) i Netscape for den opdager flere fejl end IE.

Ok, jeg prøver at starte helt fra bunden. Det er jo også en fil jeg ikke selv har lavet som jeg bare har ændret på. Dengang tog man ikke højde for NS:) Men tak for hjælpen endnu en gang

bgo

NS6 melder fejlen:

"document.images is not a function"
linje 10

Og det har den sådan set fuldstændig ret i! :)

Skift denne linje:

var theimg = document.images("animtext");

... ud med:

var theimg = document.images["animtext"];

Alle de andre steder i scriptet, hvor du bruger runde parenteser i stedet for kantede skal du også huske at skifte ud!

Så virker det til gengæld også cross-browser!

kæft mand. to-nul til dig phoenixv

IE kan acceptere det, men NS er en hårdere nød at knække! (heldigvis, for ellers ville der da blive totalt programmeringsanarki på nettet)

i know i know. bare ærgerlig over jeg ikke selv lige så det. jeg kan jo selvklart ikke teste med hans billeder, så jeg lod bare et tal skifte mellem 1,2,3 og 4. nokkefår at jeg så ikke tænkte på at det var indexeringenen af images det var galt med.

P.S. 2-1 må det vel stå!

nåååeh ja. der var en lille drilsk halv-flugter med shorthand arrays :D.
jeg har opdateret min interne debug rutine
class MaddogDebug {
  Errors[] err;
  public MaddogDebug(Errors[] err) {
    this.err = err;
  }
  public boolean debug(int numoferrs) throws NoMoreCoffeeException {
    int i = 0;
    while (this.err[i]!=null && numoferrs|Error.ERRORCODE) {
      err[i].isTagsClosed();
      err[i].isCodeSupported();
      ....
      err[i].isImgIndexed();  // thanks to phoenixv
      if (err[i].isBugged) return false;
    }
    return true;
  }
}

ok det var geek-humor

oh no en bug i min debug. det skal være
(numoferrs<Error[i].ERRORCODE) ikke
numoferrs|Error.ERRORCODE

Jamen hvor kan løsningen dog være simpel:) Og min solEvent kom af samme grund til at virke:)

Det her tvang mig også til at gå på opdagelse i NS... Og fandt redskabet jeg skulle bruge (som jeg ikke tidligere har kunnet finde, da jeg jo er vant til IE): JavaScript Console, gemt godt af vejen :))

Så nu skulle det være muligt at fange de dumheder jeg laver :))

bgo

maddog>> Jep, geek-humor... Men hva' fa'en, vi må vel også have vores sjov (derudover fatter meget nær minus af din debugger)!