Ben's Hobbyhoekje -- Listbox met links

Op de voorpagina van deze site staan listboxen met links naar sites die ik vaak gebruik. Opvallend daarbij is dat de kleur van de letters verschilt per regel van de lijst.
Hier staat beschreven hoe je dit aanpakt.

Voor deze pagina gebruiken we als voorbeeld de listbox hier onder:

N.B. De links brengen je niet naar een website, maar geven alleen een alert.

De code staat aan het einde van deze bladzijde. Je kunt hem ook downloaden.

De code bestaat uit de volgende onderdelen:
1. Een <style>-tag.
  Deze bevat definitie van style-classes voor de verschillende letterkleuren.
2. Een <select>-tag met daarin de definitie van de listbox.
  De <select>-tag bevat een <option> voor elke regel van de listbox.
  De selectie is opgenomen in een formulier: <form>
3. Een stukje JavaScript dat de link vormt tussen de listbox en de hyperlink naar de betreffende website.
De <style> behoeft geen verandering, tenzij je andere kleuren, lettertype en/of lettergrootte wilt. De <form> en het JavaScript moeten worden aangepast voor eigen gebruik van de listbox.
De werking van de code en het script is als volgt:

De opmaak van de regels tekst in de listbox wordt geregeld door aan de <select>-tag en elke <option> het attribuut class="....." mee te geven.
Als de listbox wordt veranderd (d.w.z. de tekst in het venster wordt anders omdat er een keuze is gemaakt) wordt de JavaScript-functie go_page() aangeroepen. Dit wordt gedaan met het attribuut onChange in de <select>-tag.
Zowel de <form>-tag als de <select>-tag heeft een unieke naam binnen het .HTM bestand. Het JavaScript gebruikt dat om de keuze uit de listbox op te halen.
De functie go_page() roept de gevraagde website aan via de in-geprogrammeerde URL.
Als eerste wordt een variabele waarde gemaakt. Deze krijgt de waarde "value" van het gekozen item uit de listbox. Voorbeeld: Als het item "Outlook" is gekozen, wordt waarde gelijk aan 2.

Om dit te bereiken wordt de volgende referentie gebruikt:
var waarde = document.keuze1.lijst1.options[index].value
Dit ziet er ingewikkelder uit dan het is. De referentie is:
1. document: dit is de huidige web-pagina.
2. keuze1: dit is het formulier <form>.
3. lijst1: dit is de listbox <select>.
4. value: dit is het attribuut "options[index].value" in de <OPTION>.
De index is op de zelfde manier opgebouwd als hierboven. SelectedIndex is het volgnummer in de array van <option>'s.
Voor het bepalen van de tekst die in de statusbalk wordt getoond wordt hetzelfde gedaan als bij het bepalen van waarde. Alleen wordt hier aan "text" gerefereerd in plaats van aan "value".
De listbox spreekt nu voor zichzelf:
- De <form> heeft de naam keuze1.
- De <select> heeft de naam lijst1. Het attribuut onChange roept de functie go_page() aan. Het uiterlijk van het venster is bepaald door size en width. Als er geen class is gegeven bij de <option>'s wordt gekozen voor "FormB"
- Elke <option> heeft een value en een text (dit is de leesbare tekst, bijv. Google, HotMail enz.)
- Bij openen van de pagina staat "-- Kies een favoriet --" geselecteerd (attribuut selected).
  N.B.: De non-breaking spaces ( ) staan hier om de tekst een beetje op te schuiven. Zuiver cosmetisch dus.

Gebruik:

De <style>-tag en het JavaScript zet je het beste in de <HEAD>.
De code van de listbox staat in de <BODY> op de plaats waar je de melding wilt hebben. Zo nodig zet je er tags bij om de listbox netjes in het midden te positioneren.

De code ziet er als volgt uit:

(Zet deze code in de <HEAD>)

<style>
.FormB {
font-family : arial, helvetica, sans-serif;
font-size : 11pt;
font-weight: normal;
color: #000099;
text-decoration: none
}
<style>

N.B.: Alleen de style-definitie voor Blauwe letters wordt hier getoond. In de code die je kunt downloaden staan styles voor de vier gebruike kleuren blauw, groen, rood en zwart.
Uiteraard gebruik je de font-family, font-size, enz., die horen bij jouw site!

(Zet dit JavaScript in de <HEAD>)

<script>
// Keuze menu, Ben's Favorieten
// (c) 2001 Ben Boukes. Mag vrij worden gebruikt.

function go_page() {
var waarde = document.keuze1.lijst1.options[document.keuze1.lijst1.selectedIndex].value;

if (waarde == '1')
self.location = "https://www.google.com";
if (waarde == '2')
self.location = "https://www.hotmail.com";
if (waarde == '3')
self.location = "https://greetz.nl/kaarten";
if (waarde == '4')
self.location = "https://www.detelefoongids.nl";
if (waarde == '5')
self.location = "https://www.routenet.nl";
}
</script>

Hier geldt: volledige opdracht op één regel. Door het afbreken van de tekst door de browser kunnen opdrachten hier over meerdere regels verdeeld zijn.

(Zet deze code in de <BODY> op de plaats waar de listbox moet komen.)

<form name="keuze1">
<select name="lijst1" size="1" width="30" class="FormB" onChange="go_page()">
<option value="0" selected>   -- Kies een favoriet -- </option>
<option value="1" class="FormR">Google</option>
<option value="2" class="FormB">HotMail</option>
<option value="3" class="FormB">E-cards</option>
<option value="4" class="FormZ">Telefoonboek</option>
<option value="5" class="FormG">Routeplanner</option>
</select>
</form>

Downloaden:

Druk op de knop: File: voorb028.zip, 780 bytes.

Opmerking:

Natuurlijk kun je op deze manier ook naar lokale pagina's linken (van je eigen site). In het JavaScript zet je dan in plaats van een volledige URL (met https://www......) gewoon de naam van de betreffende .HTML-file.