[JS] loop licht, maar dan met letters

[Arjan]

code:

<SCRIPT language="JavaScript">
linknaam = 0;

function mouseover(nrletters)
{
erbij = 0;
while (erbij <= nrletters){
aantal = (linknaam + erbij);
aantal.color='AAAAAA';
erbij++;            }
}

/*
function mouseout(nrletters)
{
aantal = (linknaam + erbij);
aantal.color='000000';
}
*/
</SCRIPT>
<BR><BR>

<B><FONT face="arial">
<DIV onMouseOver="linknaam='home'; mouseover(3), onMouseOut=mouseout(3)">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>
</FONT></B>

deze code heb ik gister verzonne, ik ben nogal een java n00b dus daar geen leipe opmrekingen over graag

De bedoeling was dat met deze code je het woord HOME kreeg, en als je met de muispointer daarop gaat staan, dat de letters H, O, M, E een voor een lichtgrijs worden.

hier zit nog geen code bij voor wanneer hij alle letters een keer grijs heeft gemaakt, maar dat is ook nog niet nodig aangezien dit nog niet eens werkt.

dus wie helpt me verder?

[Clay]

aantal = (linknaam + erbij);

moet je even veranderen in

aantal = eval(linknaam + erbij);

omdat je de font tag met dat id wil aanspreken, zoals het nu is stel je alleen maar een string samen. En met een while loop kan je geen animaties maken, dat gaat namelijk te snel. Je zal een timer moeten gebruiken, ofwel een setInterval, of een setTimeout, en dan krijg je iets als:

code:

function mouseover(nr) {    
   [ code hiero ]
   

   erbij ++ 
   if(erbij > nr) {
    erbij = 0;
   } else setTimeout("mouseover("+nr+")", 50)
}

[Arjan]

Op zondag 30 december 2001 14:51 schreef Clay het volgende:
setTimeout("mouseover("+nr+")", 50)

kun je die lijn even toelichten? de rest snap ik inmidels

edit:

ok, die lijn snap ik nu ook maar t geheel werkt nog steeds niet

[Arjan]

waarom werkt deze niet??

code:

<SCRIPT language="JavaScript">
linknaam = 0;
erbij = 0;

function mouseover(nrletters)
{

if (erbij <= nrletters)
{
aantal = eval(linknaam + erbij);
aantal.color = 'AAAAAA';
erbij ++ ;        
setTimeout('mouseover()','500');

if (erbij >= 1)
{
terug = eval(linknaam + (erbij - 1));
terug.color = '000000';
setTimeout('mouseover()','500');
}

else
  {
   terug = eval(linknaam + nrletters);
  }
}

else
  {
   erbij = 0;
  }
}
</SCRIPT>

[Arjan]

code:

<SCRIPT language="JavaScript">
linknaam = 0;
erbij = 0;

function mouseover(nrletters)
{

if (erbij <= nrletters) {
aantal = eval(linknaam + erbij);
aantal.color = 'AAAAAA';
erbij ++ ;
setTimeout('mouseover()','1000');}

else {
erbij = 0;}

}
</SCRIPT>

deze doet t maar niet zoals ik had verwacht.
deze doet t wel als je een beetje met de pointer beweegt, het probleem zit er volges mij in dat ie niet doorloopt als je er op blijft staan, heel raar vind ik t.
iemand die hier wat nuttigss over kan zeggen?

[Arjan]

dit topic krijgt een behoorlijk atgast gehalte....

ik ben nu zover dat ik eigelijk alleen nog maar een vertraging moet inbouwen, want de methode die eerder werd beschreven doet t niet om de een of andere rede

[Clay]

code:

linknaam = 0;
erbij = 0;
 
function mouseover(nr) {    
   
   aantal = eval(linknaam + erbij);
   aantal.color='#aaaaaa';
   
   erbij ++ 
   if(erbij > nr) {
    erbij = 0;
   } else setTimeout("mouseover("+nr+")", 100)
}

moet je wel in die div ff de onmouseout fixen, want die staat in je eerste post in de onmouseover tag, en dat klopt niet. voor de mouseout kleur zul je dan net zoiets moeten doen zoals je nu met linknaam doet.

[Arjan]

code:

<SCRIPT language="JavaScript">
erbij = 0;
test = "";
doorgaan = "";
stop = "";

function mouseover(nrletters, linknaam)
{

while (erbij <= nrletters) {
aantal = eval(linknaam + erbij);
aantal.color = 'AAAAAA';
test = test + aantal;
//alert(test);
//setTimeout('mouseover()','1000');
erbij ++ ;

if (doorgaan = stop){
break;}

}

erbij = 0;

}
</SCRIPT>

<DIV onMouseOver="mouseover(3, 'home')" onMouseOut="doorgaan='stop'">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>

Deze doet t in principe, maar zo snel dat je t niet ziet.
Natuurlijk had ik dit verwacht, en t was ook al eens gezegd, maar opgelost krijg ik het niet, ik moet dus in elke loop die het while statement maakt een vertraging in kunnen bouwen, maar hier ben ik nog niet in geslaagd, en vraag ik dus jullie hulp voor.

[chris]

Kan je niet een functie bouwen die een bepaalde letter oplichten en daar vervolgens een timeout op zetten?
[flauw mode]
Je kan natuurlijk ook gewoon <blink></blink> gebruiken
[/flauw mode]

[Verwijderd]

Op maandag 31 december 2001 22:11 schreef dev-null het volgende:
[flauw mode]
Je kan natuurlijk ook gewoon <blink></blink> gebruiken
[/flauw mode]

Wazda?

[Mithrandir]

Op maandag 31 december 2001 23:52 schreef Rmon het volgende:

[..]

Wazda?

De mooiste uitvinding van Microsoft tot nu toe

[Verwijderd]

Op dinsdag 01 januari 2002 11:47 schreef DinoRaptor het volgende:

[..]

De mooiste uitvinding van Microsoft tot nu toe

Aha
wat doet dat dan kan je dat gewoon serieus als html gebruiken?

[Arjan]

Op maandag 31 december 2001 22:11 schreef dev-null het volgende:
Kan je niet een functie bouwen die een bepaalde letter oplichten en daar vervolgens een timeout op zetten?

zou je dit ff kunnen uitleggen want ik snap niet helemaal wat je bedoeld...

[Thijsmans]

blink is NS-only.

[Clay]

Vorig jaar schreef Atgast het volgende:

code:

...

Deze doet t in principe, maar zo snel dat je t niet ziet.
Natuurlijk had ik dit verwacht, en t was ook al eens gezegd, maar opgelost krijg ik het niet, ik moet dus in elke loop die het while statement maakt een vertraging in kunnen bouwen, maar hier ben ik nog niet in geslaagd, en vraag ik dus jullie hulp voor.

Heb je nou nog gekeken naar wat ik gepost heb boven deze post? want je gebruikt hier nog steeds zo'n while ding, en dat gaat gewoon niet werken als je een vertraging wil.

samen met die functie:

code:

<DIV onMouseOver="linknaam='home'; mouseover(3);">

werkt prima.

[Arjan]

code:

<SCRIPT language="JavaScript">
erbij = 0;
terug = 0;
aantal = "";

function aansturen(nrletters, linknaam, over) {
while (over == 1) {
setTimeout('mouseover(nrletters, linknaam)','500'); }
}

function mouseover(nrletters, linknaam) {

aantal.color = '000000';
aantal = eval(linknaam + erbij);
aantal.color = 'AAAAAA';

if (erbij > nrletters - 1) {
terug = 1; }
if (erbij == 0) {
terug = 0; }

if (terug == 1) {
erbij -- ; }
else {
erbij ++ ; }

}
</SCRIPT>
<BR><BR>

<B><FONT face="arial">
<DIV onMouseOver="aansturen(3, 'home', 1); onMouseOut=over=0">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>
</FONT></B>

Ik heb het idee alsof ik hele domme dingen zit te doen...

maargoed, waarom doet deze het nou weer niet ???

en trouwens @

Heb je nou nog gekeken naar wat ik gepost heb boven deze post? want je gebruikt hier nog steeds zo'n while ding, en dat gaat gewoon niet werken als je een vertraging wil.

ik heb geen idee hoe ik dit zonder een while statement moet maken.

[Arjan]

^^^^^^^^^^^^^^^^^^ KICK !!! ^^^^^^^^^^^^^^^^^^

vast wel iemand die me een zetje in de goede richting kan geven... toch?

[Clay]

heb je er weeeeer een while in dat werkt niet! nou worden alle timeouts tegelijk gezet, en wordt alles over een halve seconde gekleurd.

code:

<SCRIPT language="JavaScript">

linknaam = 0;
kleur = 0;
erbij = 0;
 
function mouseover(nr, color, name) {   
   if(name) linknaam = name;
   if(color) kleur = color;
   
   aantal = eval(linknaam + erbij);
   aantal.color= kleur;
   
   erbij ++ 
   if(erbij > nr) {
    erbij = 0;
   } else setTimeout("mouseover("+nr+")", 100)
}


</SCRIPT>

<DIV onMouseOver="mouseover(3, '#aaaaaa', 'home')" onMouseOut="mouseover(3, '#000000')">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>

[crisp]

Mooier is om ipv setTimeout setInterval te gebruiken. Bij je onMouseOut doe je dan een clearInterval:

code:

<SCRIPT language="JavaScript">
erbij = 0;
terug = 0;
aantal = "";
loop = null;

function aansturen(nrletters, linknaam) {
 if (!loop) loop = setInterval('mouseover(nrletters, linknaam)','500');
}

function stopmaar() {
 if (loop) {
  clearInterval(loop);
  loop = null;
 }
}

function mouseover(nrletters, linknaam) {

aantal.color = '000000';
aantal = eval(linknaam + erbij);
aantal.color = 'AAAAAA';

if (erbij > nrletters - 1) {
terug = 1; }
if (erbij == 0) {
terug = 0; }

if (terug == 1) {
erbij -- ; }
else {
erbij ++ ; }

}
</SCRIPT>
<BR><BR>

<B><FONT face="arial">
<DIV onMouseOver="aansturen(3, 'home'); onMouseOut="stopmaar()">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>
</FONT></B>

[Clay]

ik vind een interval niet per definitie mooier. kan idd wel, maar het is meer code, en zo werkt het niet omdat je nu nrletters en linknaam in de interval als globale vars aanspreekt, en die zijn lokaal voor aansturen(), en die functie is die meteen weer uit zodra de interval gezet is, en dan zijn de vars fietsen.

[crisp]

Op woensdag 02 januari 2002 21:51 schreef Clay het volgende:
ik vind een interval niet per definitie mooier. kan idd wel, maar het is meer code, en zo werkt het niet omdat je nu nrletters en linknaam in de interval als globale vars aanspreekt, en die zijn lokaal voor aansturen(), en die functie is die meteen weer uit zodra de interval gezet is, en dan zijn de vars fietsen.

Je hebt gelijk wb de code; heb ik zelf niet echt naar gekeken omdat ik alleen maar het principe wou demonstreren.
wb het gebruik van setInterval tegenover setTimeout ben ik het niet helemaal met je eens. Het is misschien iets meer code, maar zegt wel duidelijker wat er gebeurd (een actie op bepaalde intervals).
Een setTimeout vind ik eigenlijk meer iets voor een eenmalige actie die je met een delay wil uitvoeren. Zoals jij het gebruikt is het net een soort GOTO.

[Clay]

Ja klopt, ik ben het ook wel met je eens, ik heb ook gewoon die code die er was gepakt en er wat bijgeplakt. Ik gebruik normaal nooit timeouts

[Arjan]

Op woensdag 02 januari 2002 21:28 schreef crisp het volgende:

code:

function aansturen(nrletters, linknaam) {
 if (!loop) loop = setInterval('mouseover(nrletters, linknaam)','500');
}

zou je dat even kunnen uitleggen want dat zegt me niet veel.... (lees: niks)
en buiten dat, hij doet t niet

die van Clay wel, bedankt clay , met een beetje aanpassing is dit presies wat ik zoek

[crisp]

Op woensdag 02 januari 2002 22:06 schreef Atgast het volgende:

[..]

zou je dat even kunnen uitleggen want dat zegt me niet veel.... (lees: niks)
en buiten dat, hij doet t niet

ik benoem hier de interval; (!loop) wil zoiets zeggen als: als de interval nog niet bestaat, zet hem dan aan (heeft geen zin om dat te doen als om de een of andere reden de interval al loopt).

die van Clay wel, bedankt clay , met een beetje aanpassing is dit presies wat ik zoek

Clay heeft al uitgelegd waarom die van mij het niet doet (was ook niet getest). Als die van Clay goed werkt: prima toch?

[Arjan]

jep, maar die uitleg werd getypt tijdens mijn reply
Thanx Crisp, Clay

[Arjan]

ik begin t idee te krijgen alsof ik beter een andere hobby kan zoeken

Ik had dus de code van clay overgenomen, en hem aangepast aan de animnatie die ik wilde.
Het eerste opmerkelijke feit was, dat als je de muis van de link haalde, en hem erna weer terugzette, de animatie 2x zo snel ging....
Heb ik dat ff genegeerd, en ben ik verder gegaan op t laten stoppen van de animatie.
daarvoor had ik dit bedacht:

code:

<SCRIPT language="JavaScript">
linknaam = 0;
erbij = 0;
teller = 0;
zwart = '#000000';
grijs = '#AAAAAA';
aantal = 0;
stop = 0;

function mouseover(nr, name, stop) {
if(aantal != 0) aantal.color= zwart;
if(name) linknaam = name;
if(linknaam) aantal = eval(linknaam + erbij);
aantal.color= grijs;
if(erbij > nr - 1) terug = 1;
if(erbij == 0) terug = 0;
if(terug == 1) erbij -- ;
else erbij ++ ;
if(stop == 0) setTimeout("mouseover("+nr+")", 250);
if(stop == 1) makeblack(nr);
}

function makeblack(nr) {
while (teller < nr) {
eval(linknaam + teller);
aantal.color=zwart;
teller ++; }
teller = 0; }

</SCRIPT>

<DIV onMouseOver="mouseover(3, 'home', 0)" onMouseOut="mouseover(3, 'home', 1)">
<FONT ID="home0">H</FONT><FONT ID="home1">O</FONT><FONT ID="home2">M</FONT><FONT ID="home3">E</FONT>
</DIV>

de animatie stopt, dat is zeker, maar hij blijft ook niet meer lopen ondanks dat de waarde stop op 0 blijft staan...
voor mij is het een raadsel, en wie t wel weet, mag t me zeggen

[Clay]

wat is nou eigenlijk het effect waar je uiteindelijk op uit wil komen? dat de letters bij mouseover gaan "rennen" net als neon verlichting in las vegas, of dat de letters achter elkaar grijs worden, en dat het ophoudt als alles grijs is en weer zwart wordt bij mouseout?

[crisp]

Dit zijn toch leuke dingen om uit te vogelen; leer je ten slotte een hoop van!

Daarom heb ik het zelf ook maar even gedaan:

code:

<html>

  <head>

    <title>Looplicht</title>

    <script language="JavaScript">

    <!--

      var zwart = '#000000';
      var grijs = '#aaaaaa';
      var addsub = 1;
      var letter = 0;

      var looplicht = null;
      var looplichtid = null;

      var dom = (document.getElementById);
      var ie4 = (document.all && !dom);

      function mouseover(id) {

        if (looplicht && looplichtid != id) mouseout();

        if (!looplicht) {
        looplichtid = id;
        letter = 0;
        addsub = 1;
        looplicht = setInterval('loop()', 100);

        }

      }

     function mouseout() {

       if (looplicht) clearInterval(looplicht);

       for (letter = 0; letter < looplichtid.length; letter++) {

         var spanid = looplichtid + letter;
         if (dom) document.getElementById(spanid).style.color = grijs;
         if (ie4) document.all[spanid].style.color = grijs;

       }

       looplicht = null;
       looplichtid = null;

     }

     function loop() {

       var spanid = looplichtid + letter;

       if (dom) {
         if (addsub == 1) document.getElementById(spanid).style.color = zwart;
         else document.getElementById(spanid).style.color = grijs;
       }
       if (ie4) {
         if (addsub == 1) document.all[spanid].style.color = zwart;
         else document.all[spanid].style.color = grijs;
       }

       letter += addsub;

       if (letter < 0 || letter >= looplichtid.length) {

         addsub = - addsub;
         letter += addsub;

       }

     }

    //-->

    </script>

  </head>

  <body style="overflow: auto; background: #ffffff">

    <div id="home" style="cursor: hand; color: #aaaaaa; font-weight: 600; width: 0" onMouseOver="mouseover('home')" onMouseOut="mouseout()">
    <span id="home0">H</span><span id="home1">O</span><span id="home2">M</span><span id="home3">E</span>
    </div>

    <div id="crisp" style="cursor: hand; color: #aaaaaa; font-weight: 600; width: 0" onMouseOver="mouseover('crisp')" onMouseOut="mouseout()">
    <span id="crisp0">C</span><span id="crisp1">R</span><span id="crisp2">I</span><span id="crisp3">S</span><span id="crisp4">P</span>
    </div>

  </body>

</html>

Zoals je ziet een compleet andere aanpak qua code, maar het effect is er (IE zeker, NS6 maybe).
Ik heb in de DIV's width: 0 gezet om ervoor te zorgen dat ze zich niet uitstrekken over de hele pagina; hopelijk heeft dit in alle IE versies hetzelfde effect.
Ook heb ik SPAN's gebruikt ipv FONT tags; vond ik in dit geval logischer.

[Arjan]

Op donderdag 03 januari 2002 09:27 schreef Clay het volgende:
wat is nou eigenlijk het effect waar je uiteindelijk op uit wil komen? dat de letters bij mouseover gaan "rennen" net als neon verlichting in las vegas, of dat de letters achter elkaar grijs worden, en dat het ophoudt als alles grijs is en weer zwart wordt bij mouseout?

dat de letters het effect gevenm zoals in de serie The knightrider

edit:

kan iemand mij trouwes uitleggen waarom mijn laatste code niet werkte ???

zoo crisp, das een halve bijbel duurt wel ff voordat ik dit doorheb, het effect was overigens niet presies wat ik bedoelde maar da geeft niks, ik wil het toch zelf maken (ook al is het dan voor 2005 nog niet klaar) Dit is iig erg leerzaam

http://213.51.10.49/Arjan/test.html
het bedoelde looplicht maar dan met acceleratie

[crisp]

O, zoiets?

[Arjan]

STOERRRR,

alleen een heel klein beetje jammer dat mijn schijfje gecrashed is, en ik als t een beetje meezit nog 3 weken moet wachten op de vervanger

iig, THANX !!