[JS]Link veranderen na muisklik

[Dr_Frickin_Evil]

Ik wil voor mijn site, www.lighttowntours.nl , realiseren dat wanneer ik op 1 van de onderste menuknoppen klik, de knoppen dan van functie veranderen (en dus de tekst op de knop ook). Stel bijvoorbeeld, ik klik op de knop "Agenda", dan wil ik dat de knop verandert in een knop "Partyplan", de knop Foto's in "Tours" en de knop "Guestbook" moet "Back" worden. Is dit (redelijk eenvoudig) te maken, en heeft iemand zo al suggesties hoe dat te doen?

[Verwijderd]

mja, kan je niet gewoon andere pagina's maken met die andere knopjesconfiguratie erin?
/me snapt t niet echt

[Thijsmans]

met een for-loopje alle knoppen vervangen?

div->innerHtml

[Verwijderd]

Prammenhanger schreef op 12 augustus 2002 @ 18:30:
met een for-loopje alle knoppen vervangen?

div->innerHtml

je zou ook divjes met de knoppensets kunnen maken, dan hoef je alleen 1 divje bijv. te vervangen met innerHtml..

[Dr_Frickin_Evil]

Verwijderd schreef op 12 augustus 2002 @ 18:26:

mja, kan je niet gewoon andere pagina's maken met die andere knopjesconfiguratie erin?
/me snapt t niet echt

ja dat kan natuurlijk wel, maar is uhm niet zo netjes... het moet op deze manier toch ook te doen zijn?
Wat ik dus bedoel, ik heb op een andere site van mij een scriptje gemaakt waarmee ik een foto kan veranderen ahw, te zien op http://131.155.240.208/Bruiloft/tijdlijn.html (niet allemaal tegelijk bezoeken, deze server staat hier thuis ). Dit werkt als volgt:

code:

[img]"http://link/foto.jpg"[/img]
<a onmouseover='document.kolom1.src="http://link/foto2.jpg">

Hetzelfde wil ik dus min of meer doen met die knoppen op www.lighttowntours.nl , met het verschil dat ik nu dus alleen tekst, en de link waar de knop naartoe verwijst wil veranderen. Hoe doe ik dat?

[HunterPro]

Dr_Frickin_Evil schreef op 12 augustus 2002 @ 20:43:
[...]
ja dat kan natuurlijk wel, maar is uhm niet zo netjes... het moet op deze manier toch ook te doen zijn?
Wat ik dus bedoel, ik heb op een andere site van mij een scriptje gemaakt waarmee ik een foto kan veranderen ahw, te zien op http://131.155.240.208/Bruiloft/tijdlijn.html (niet allemaal tegelijk bezoeken, deze server staat hier thuis ). Dit werkt als volgt:

code:

[img]"http://link/foto.jpg"[/img]
<a onmouseover='document.kolom1.src="http://link/foto2.jpg">

Hetzelfde wil ik dus min of meer doen met die knoppen op www.lighttowntours.nl , met het verschil dat ik nu dus alleen tekst, en de link waar de knop naartoe verwijst wil veranderen. Hoe doe ik dat?

ik zou er toch voor gaan meerdere divs te maken met de links op de juiste plek. Want je zal toch steeds een 'set' knoppen willen hebben. Het handigst en het snelst is het dan om de huidige div te hiden, en vervolgens de 'gekozen' div te tonen. Dit kan makkelijk met behulp van javascript en CSS.

[Dr_Frickin_Evil]

FF een kick, ik heb er een tijdje niet aan kunnen werken.
Het werkt nu een beetje. Als ik op de knop klik komt er "back" te staan en verdwijnt "agenda"... maar niet helemaal zoals ik wil. Een beetje moeilijk uit te leggen, maar kijk zelf maar op www.lighttowntours.nl . Als ik nu op de knop klik, dan wordt de pagina weer opnieuw opgevraagd, en dan komt er weer "agenda" te staan, en verdwijnt "back" weer meteen. Ook wil ik het zo maken, dat "back" op de zelfde plek komt te staan als waar "agenda" stond, en omgekeerd.

Zoals het nu werkt, heb ik het als volgt gemaakt:

code:

<td width="20%" onmouseover="MakeSelected(this)" onmouseout="MakeDeselected(this)" onclick="ShowMenu('agenda');HideMenu('home');document.location.href='index.php?url=work1.html&url2=agenda2.html'" class="menu1">
            <div id="home" class="home"><center>Agenda</center></div>
            <div id="agenda" class="bla"><center>Back</center</div></td>

dit staat in de CSS:

code:

    div.bla {text-decoration: none; font-size: 12px; cursor: pointer; cursor: hand; visibility:hidden}
    div.home {text-decoration: none; font-size: 12px; cursor: pointer; cursor: hand; visibility:visible}

en dit is het javascript wat wordt aangeroepen:

code:

function MakeSelected(temp){
    temp.style.background="#0060A9"
}

function MakeDeselected(temp){
    temp.style.background="#FFFFFF"
}
function ShowMenu(temp){
    document.getElementById(temp).style.visibility="visible"
}

function HideMenu(temp){
    document.getElementById(temp).style.visibility="hidden"
}

Weet iemand wat ik fout doe nu?

[Grom]

Dat ie opnieuw laad doe je zelf:
document.location.href='index.php?url=work1.html&url2=agenda2.html'" (= zelfde als in je frameset)
en ja dan krijg je natuurlijk weer je uitgangspositie terug.

Eerste reply van Akira nog eens bekijken lijkt me.

[Dr_Frickin_Evil]

ja dat snap ik natuurlijk wel, maar mijn vraag is nu, hoe doe ik het anders? De reply van Akira is een optie, maar dat vind ik niet zo netjes.

[Grom]

frames uitbreiden, een iframe gebruiken, je content in een div .. als er maar iets is dat niet herladen wordt.
En met met ( te veel ) JS.
Imo is die optie van Akira zonder dit alles de makkelijkste en netste.

[WvdWest]

Als je toch gebruik maakt van PHP, kan je dan niet bij het laden van de pagina de verwijzing naar het menu schrijven? Je hebt al een querystring url2 waarmee je makkelijk kan bepalen welke opties moeten worden geschreven.

[Verwijderd]

Ik heb een stukje getest; deze werkt bij mij. Hier veranderen zowel de links als de tekst. De table wordt in een innerhtml geschreven. En de variabelen worden vastgesteld en in een array gestopt. Voor de duidelijkheid de innerhtml op verschillende regels geplaatst vanwege de duidelijkheid. Moet aan elkaar dus. '
En hans1 is de naam van het frame waar de links komen te staan.

Bij kies[2]=link[b] gaat er blijkbaar wat verkeerd met de topic

code:

var link=new Array();
link[1]="http://www.lighttowntours.nl/lighttown.php?url=work1.html&url2=agenda2.html";
link[2]="http://www.lighttowntours.nl/lighttown.php?url=work1.html&url2=links.html";
link[3]="http://www.lighttowntours.nl/lighttown.php?url=work1.html&url2=agenda2.html";
link[4]="Agenda";
link[5]="Foto";
link[6]="Guestbook";

var kies=new Array();

function geef(a,b,c)
{
kies[1]=link[a];
kies[2]=link[b];
kies[3]=link[c];
kies[4]=link[a+3];
kies[5]=link[b+3];
kies[6]=link[c+3];
schrijf();
}

function schrijf()
{
document.all['schr'].innerHTML='<html><body><table width="365" cellspacing="10" cellpadding="5">
<tr><td width="10%" bgcolor="#FFFFFF"></td>
<td width="20%" align="center" onmouseover="MakeSelected(this)" 
onmouseout="MakeDeselected(this)" onclick="geef(1,2,3); parent.hans1.location.href=\''+kies[1]+'\'"
class="menu1";>'+kies[4]+'</td>

<td width="10%" bgcolor="#FFFFFF"></td><td width="20%" align="center" onmouseover="MakeSelected(this)" 
onmouseout="MakeDeselected(this)" 
onclick="geef(3,1,2);parent.hans1.location.href=\''+kies[2]+'\'"
class="menu1";>'+kies[5]+'</td>

<td width="10%" bgcolor="#FFFFFF"></td><td width="20%" align="center" onmouseover="MakeSelected(this)" 
onmouseout="MakeDeselected(this)" 
onclick="geef(2,3,1);parent.hans1.location.href=\''+kies[3]+'\'" 
class="menu1";>'+kies[6]+'</td>

<td width="10%" bgcolor="#FFFFFF"></td>
</tr></table></body></html>';
document.close();
}
</script>
</head>
<body onLoad="geef(1,2,3)">
<div id="schr" 
style="position:absolute;top:0;left:200;visibility:visible;background-color:#00FFFF">
</body>
</html>