[rollover button] Actieve knop laag houden

[-Mous-]

Ik hoop dat mijn topictitel een beetje duidelijk is, maar hier is dan mijn vraag:

ik heb het volgende script voor mijn rollover buttons gemaakt:

code:

<!--
  if (document.images)
  {
    knop = new Array();
    knop[12] = new Image();
    knop[12].src = "afbeeldingen/knoppen/wit_basketbal.gif";
    knop[24] = new Image();
    knop[24].src = "afbeeldingen/knoppen/rood_basketbal.gif";
    knop[13] = new Image();
    knop[13].src = "afbeeldingen/knoppen/wit_casemod.gif";
    knop[26] = new Image();
    knop[26].src = "afbeeldingen/knoppen/rood_casemod.gif";
    knop[14] = new Image();
    knop[14].src = "afbeeldingen/knoppen/wit_links.gif";
    knop[28] = new Image();
    knop[28].src = "afbeeldingen/knoppen/rood_links.gif";
    knop[15] = new Image();
    knop[15].src = "afbeeldingen/knoppen/wit_e-mail.gif";
    knop[30] = new Image();
    knop[30].src = "afbeeldingen/knoppen/rood_e-mail.gif";
    knop[16] = new Image();
    knop[16].src = "afbeeldingen/knoppen/wit_games.gif";
    knop[32] = new Image();
    knop[32].src = "afbeeldingen/knoppen/rood_games.gif";
    knop[17] = new Image();
    knop[17].src = "afbeeldingen/knoppen/wit_tutorials.gif";
    knop[34] = new Image();
    knop[34].src = "afbeeldingen/knoppen/rood_tutorials.gif";
    knop[18] = new Image();
    knop[18].src = "afbeeldingen/knoppen/wit_gastenboek.gif";
    knop[36] = new Image();
    knop[36].src = "afbeeldingen/knoppen/rood_gastenboek.gif";
  }
  
  function rol(van,naar)
  {
    if (document.images)
    {
    document.images[van].src = knop[naar].src;
    }
  }
-->

Ik roep dat dan op de volgende manier aan:

code:

<a href="games.htm" target="pagina"
onMouseOver="rol('games',32);" onMouseOut="rol('games',16);">
<img name="games" id="games"
src="afbeeldingen/knoppen/wit_games.gif" border="0">

Dit werkt goed, maar ik wil dus het knopje van de link die actief is rood laten blijven. Ik heb dit geprobeerd met "onActive", maar dan springt hij niet terug als ik op een andere knop druk.

Weet iemand misschien hoe ik dit moet doen?

Even voor de duidelijkheid:
Dit wil ik: link weg
En dit heb ik: link weg (site nog niet af)

[Annie]

Voeg een onclick toe waarbij je de image "rood maakt" (selecteerd) en in een globale var opslaat wat de huidige selectie is. Met deze waarde kan je dan bij een onmouseover of -out wel of niet de actie uitvoeren.
sim-pel

btw. als je een beetje zoekt vind je al gauw honderden voorbeelden op i-net

[-Mous-]

Op zondag 12 mei 2002 19:22 schreef Annie het volgende:
Voeg een onclick toe waarbij je de image "rood maakt" (selecteerd) en in een globale var opslaat wat de huidige selectie is. Met deze waarde kan je dan bij een onmouseover of -out wel of niet de actie uitvoeren.
sim-pel

btw. als je een beetje zoekt vind je al gauw honderden voorbeelden op i-net

Die voorbeelden kon ik niet zo veel wijs uit (ben nog een beetje n00b op dit gebied), maar ik ga het ffies proberen.

-edit-

Het lukt voor geen meter.
Heeft er niet iemand een stukkie code ofzo?
Of misschien een URL, want ik kan op het net niet vinden wat ik zoek.

[crisp]

zoiets:

code:

var activelink = ''; // een global
var activelinknum = 0; // nog een global
function rol(van,naar)
  {
    if (document.images)
    {
    if (van != activelink)
    {
      document.images[van].src = knop[naar].src;
    }
    }
  }
function switchactive(van,naar)
  {
    if (activelink != '')
    {
    document.images[activelink].src = knop[activelinknum].src;
    }
    activelink = van;
    activelinknum = naar;
  }

en dan met:

code:

<a href="games.htm" target="pagina"
onMouseOver="rol('games',32);" onMouseOut="rol('games',16);" onClick="switchactive('games',16)">
<img name="games" id="games"
src="afbeeldingen/knoppen/wit_games.gif" border="0">
</a>

[-Mous-]

Op zondag 12 mei 2002 20:09 schreef crisp het volgende:
zoiets:

code:

var activelink = ''; // een global
var activelinknum = 0; // nog een global
function rol(van,naar)
  {
    if (document.images)
    {
    if (van != activelink)
    {
      document.images[van].src = knop[naar].src;
    }
    }
  }
function switchactive(van,naar)
  {
    if (activelink != '')
    {
    document.images[activelink].src = knop[activelinknum].src;
    }
    activelink = van;
    activelinknum = naar;
  }

en dan met:

code:

<a href="games.htm" target="pagina"
onMouseOver="rol('games',32);" onMouseOut="rol('games',16);"
onClick="switchactive('games',16)">
<img name="games" id="games"
src="afbeeldingen/knoppen/wit_games.gif" border="0">
</a>

Nope, werkt ook niet.
Maar ik ga nog wel ff rommelen

-edit-

Ik zit nu denk ik wel in de goeie richting.
Ik zat eerst helemaal verkeerde (moeilijk) te denken.

zo ziet het er nu uit:

code:

<!--

  var actief     = '';
  var actiefnummer = 0;

  if (document.images)
  {
    knop = new Array();
    knop[1] = new Image();
    knop[1].src = "afbeeldingen/knoppen/wit_basketbal.gif";
    knop[2] = new Image();
    knop[2].src = "afbeeldingen/knoppen/wit_casemod.gif";
    knop[3] = new Image();
    knop[3].src = "afbeeldingen/knoppen/wit_games.gif";
    knop[4] = new Image();
    knop[4].src = "afbeeldingen/knoppen/wit_tutorials.gif";
    knop[5] = new Image();
    knop[5].src = "afbeeldingen/knoppen/wit_links.gif";
    knop[6] = new Image();
    knop[6].src = "afbeeldingen/knoppen/wit_e-mail.gif";
    knop[7] = new Image();
    knop[7].src = "afbeeldingen/knoppen/wit_gastenboek.gif";

    knop[11] = new Image();
    knop[11].src = "afbeeldingen/knoppen/rood_basketbal.gif";
    knop[12] = new Image();
    knop[12].src = "afbeeldingen/knoppen/rood_casemod.gif";
    knop[13] = new Image();
    knop[13].src = "afbeeldingen/knoppen/rood_games.gif";
    knop[14] = new Image();
    knop[14].src = "afbeeldingen/knoppen/rood_tutorials.gif";
    knop[15] = new Image();
    knop[15].src = "afbeeldingen/knoppen/rood_links.gif";
    knop[16] = new Image();
    knop[16].src = "afbeeldingen/knoppen/rood_e-mail.gif";
    knop[17] = new Image();
    knop[17].src = "afbeeldingen/knoppen/rood_gastenboek.gif";
  }
  
  function rol(van,naar)
  {
    if (document.images)
    {
    if (van != actief)
    {
      document.images[van].src = knop[naar].src;
    }
    }
  }

  function wisselactief(van,naar)
  {
    if (actief != '')
    {
    document.images[actief].src = knop[actiefnummer].src;
    }
    actief = van;
    actiefnummer = naar;
  }
-->

aanroep:

code:

<a href="basketbal.htm" target="pagina"
onMouseOver="rol('basketbal',11);"
onMouseOut="rol('basketbal',1);"
onClick="actief('basketbal',11)">
<img name="basketbal"
id="basketbal"
src="afbeeldingen/knoppen/wit_basketbal.gif" border="0">
</a>

enz..

De knoppen blijven nog steeds niet rood...

[crisp]

probeer dit eens:

code:

function wisselactief(van,naar)
  {
    if (actief != '' && van != actief)
    {
    document.images[actief].src = knop[actiefnummer].src;
    }
    actief = van;
    actiefnummer = naar;
  }

samen met:

code:

<a href="basketbal.htm" target="pagina"
onMouseOver="rol('basketbal',11);"
onMouseOut="rol('basketbal',1);"
onClick="wisselactief('basketbal',11)">
<img name="basketbal"
id="basketbal"
src="afbeeldingen/knoppen/wit_basketbal.gif" border="0">
</a>

[-Mous-]

Op zondag 12 mei 2002 21:32 schreef crisp het volgende:
probeer dit eens:

code:

function wisselactief(van,naar)
  {
    if (actief != '' && van != actief)
    {
    document.images[actief].src = knop[actiefnummer].src;
    }
    actief = van;
    actiefnummer = naar;
  }

samen met:

code:

<a href="basketbal.htm" target="pagina"
onMouseOver="rol('basketbal',11);"
onMouseOut="rol('basketbal',1);"
onClick="wisselactief('basketbal',11)">
<img name="basketbal"
id="basketbal"
src="afbeeldingen/knoppen/wit_basketbal.gif" border="0">
</a>

Bijna goed! Nu alleen nog ervoor zorgen dat als ik op een andere link klik de knop weer wit wordt.

Nu moet je er namelijk eerst nog overheen gaan.

-edit-

Moet ik dan de laatst actieve knop invoeren in wissel?

[crisp]

Op zondag 12 mei 2002 21:52 schreef -Mous- het volgende:

[..]

Bijna goed! Nu alleen nog ervoor zorgen dat als ik op een andere link klik de knop weer wit wordt.

Nu moet je er namelijk eerst nog overheen gaan.

Zo dus:

code:

<a href="basketbal.htm" target="pagina"
onMouseOver="rol('basketbal',11);"
onMouseOut="rol('basketbal',1);"
onClick="wisselactief('basketbal',1)">
<img name="basketbal"
id="basketbal"
src="afbeeldingen/knoppen/wit_basketbal.gif" border="0">
</a>

Oftewel bij de onClick dezelfde waarden als bij de onMouseOut; deze slaat hij op om bij een volgende click de actieve link weer op inactief te zetten

[-Mous-]

Op zondag 12 mei 2002 22:03 schreef crisp het volgende:

[..]

Zo dus:

code:

<a href="basketbal.htm" target="pagina"
onMouseOver="rol('basketbal',11);"
onMouseOut="rol('basketbal',1);"
onClick="wisselactief('basketbal',1)">
<img name="basketbal"
id="basketbal"
src="afbeeldingen/knoppen/wit_basketbal.gif" border="0">
</a>

Oftewel bij de onClick dezelfde waarden als bij de onMouseOut; deze slaat hij op om bij een volgende click de actieve link weer op inactief te zetten

Ok, maar dan moet dus ook de inactieve knop weer omgewisseld worden.

Heb dit trouwens al geprobeerd, maar dat lukt niet, jammer.

Nu dus een manier vinden om die "oude" actieve knop op te slaan en bij onClick weer om te wisselen.
Zal wel met een variabele moeten denk ik.

[crisp]

Op zondag 12 mei 2002 22:09 schreef -Mous- het volgende:

[..]

Ok, maar dan moet dus ook de inactieve knop weer omgewisseld worden.

Heb dit trouwens al geprobeerd, maar dat lukt niet, jammer.

Nu dus een manier vinden om die "oude" actieve knop op te slaan en bij onClick weer om te wisselen.
Zal wel met een variabele moeten denk ik.

Ja, ik ben ook gewoon te lui om het allemaal uit te gaan proberen alvorens het helemaal voor te gaan kauwen
Enfin, nu je het principe een beetje door hebt denk ik dat je er uiteindelijk best wel uit komt

[-Mous-]

Op zondag 12 mei 2002 22:13 schreef crisp het volgende:

[..]

Ja, ik ben ook gewoon te lui om het allemaal uit te gaan proberen alvorens het helemaal voor te gaan kauwen
Enfin, nu je het principe een beetje door hebt denk ik dat je er uiteindelijk best wel uit komt

Ja inderdaad, heel erg bedankt iig.

-edit-

YES!!!!!

Het werkt:

code:

<!--
  var oud       = '';
  var actief     = '';
  var actiefnummer = 0;

  if (document.images)
  {
    knop = new Array();
    knop[1] = new Image();
    knop[1].src = "afbeeldingen/knoppen/wit_basketbal.gif";
    knop[2] = new Image();
    knop[2].src = "afbeeldingen/knoppen/wit_casemod.gif";
    knop[3] = new Image();
    knop[3].src = "afbeeldingen/knoppen/wit_games.gif";
    knop[4] = new Image();
    knop[4].src = "afbeeldingen/knoppen/wit_tutorials.gif";
    knop[5] = new Image();
    knop[5].src = "afbeeldingen/knoppen/wit_links.gif";
    knop[6] = new Image();
    knop[6].src = "afbeeldingen/knoppen/wit_gastenboek.gif";
    knop[7] = new Image();
    knop[7].src = "afbeeldingen/knoppen/wit_e-mail.gif";

    knop[11] = new Image();
    knop[11].src = "afbeeldingen/knoppen/rood_basketbal.gif";
    knop[12] = new Image();
    knop[12].src = "afbeeldingen/knoppen/rood_casemod.gif";
    knop[13] = new Image();
    knop[13].src = "afbeeldingen/knoppen/rood_games.gif";
    knop[14] = new Image();
    knop[14].src = "afbeeldingen/knoppen/rood_tutorials.gif";
    knop[15] = new Image();
    knop[15].src = "afbeeldingen/knoppen/rood_links.gif";
    knop[16] = new Image();
    knop[16].src = "afbeeldingen/knoppen/rood_gastenboek.gif";
    knop[17] = new Image();
    knop[17].src = "afbeeldingen/knoppen/rood_e-mail.gif";
  }
  
  function wissel(van,naar)
  {
    if (document.images)
    {
    if (van != actief)
    {
      document.images[van].src = knop[naar].src;
    }
    }
  }

  function wisselactief(van,naar)
  {
    oud = actief;
    wissel(oud,oud-10);
    if (actief != '' && van != actief)
    {
    document.images[actief].src = knop[actiefnummer].src;
    }
    actief = van;
    actiefnummer = naar;
  }
-->

code:

<a href="basketbal.htm" target="pagina"
  onMouseOver="wissel('basketbal',11);"
  onMouseOut="wissel('basketbal',1);"
  onClick="wisselactief('basketbal',1)">
    <img name="basketbal"
    id="basketbal"
    src="afbeeldingen/knoppen/wit_basketbal.gif"
    border="0">
</a>

[crisp]

beetje onzin:

code:

    oud = actief;
    wissel(oud,oud-10);

dus is in principe hetzelfde als:

code:

wissel(actief, actief-10);

actief is een string, dus actief-10 is gewoon nix. Verder krijg je dan:

code:

function wissel(van,naar)
  {
    if (document.images)
    {
    if (van != actief)
...

maar van=actief, dus de code wordt nooit uitgevoerd.
Als dit voor je werkt, dan moet dit ook zeker werken:

code:

  var actief     = '';
  var actiefnummer = 0;
  if (document.images)
  {
    knop = new Array();
    knop[1] = new Image();
    knop[1].src = "afbeeldingen/knoppen/wit_basketbal.gif";
    knop[2] = new Image();
    knop[2].src = "afbeeldingen/knoppen/wit_casemod.gif";
    knop[3] = new Image();
    knop[3].src = "afbeeldingen/knoppen/wit_games.gif";
    knop[4] = new Image();
    knop[4].src = "afbeeldingen/knoppen/wit_tutorials.gif";
    knop[5] = new Image();
    knop[5].src = "afbeeldingen/knoppen/wit_links.gif";
    knop[6] = new Image();
    knop[6].src = "afbeeldingen/knoppen/wit_gastenboek.gif";
    knop[7] = new Image();
    knop[7].src = "afbeeldingen/knoppen/wit_e-mail.gif";

    knop[11] = new Image();
    knop[11].src = "afbeeldingen/knoppen/rood_basketbal.gif";
    knop[12] = new Image();
    knop[12].src = "afbeeldingen/knoppen/rood_casemod.gif";
    knop[13] = new Image();
    knop[13].src = "afbeeldingen/knoppen/rood_games.gif";
    knop[14] = new Image();
    knop[14].src = "afbeeldingen/knoppen/rood_tutorials.gif";
    knop[15] = new Image();
    knop[15].src = "afbeeldingen/knoppen/rood_links.gif";
    knop[16] = new Image();
    knop[16].src = "afbeeldingen/knoppen/rood_gastenboek.gif";
    knop[17] = new Image();
    knop[17].src = "afbeeldingen/knoppen/rood_e-mail.gif";
  }
  
  function wissel(van,naar)
  {
    if (document.images)
    {
    if (van != actief)
    {
      document.images[van].src = knop[naar].src;
    }
    }
  }

  function wisselactief(van,naar)
  {
    if (actief != '' && van != actief)
    {
    document.images[actief].src = knop[actiefnummer].src;
    }
    actief = van;
    actiefnummer = naar;
  }

[-Mous-]

-onzin-

-edit-

Ik heb het uit nieuwsgierigheid toch maar weer op jouw manier geprobeerd en nu lukte het wel.

dat wissel(oud,oud-10) zal dus idd wel nix zijn...

Ik zal wel iets verkeerd getypt hebben ofzo de eerste keer.

Bedankt crisp zonder jou had ik het niet gered (weer een n00b geholpen).