Lägg in skriptkoden på sidan Bildvisning med klickbara småbilder

JavaScript - gör en rullgardinsmeny

Välj avsnitt i JavaScript:  

Med den här enkla lilla menyn, som är mycket lätt att ändra, kan din besökare välja vilken sida han eller hon vill gå till. I den här versionen kopplar länkarna till de olika delarna i avsnittet om JavaScript, men du kan göra om den så att den länkar till andra sidor på din webbplats, andra sidor på Internet eller bestämda delar av den sida som menyn ligger på. Valfriheten är alltså stor.

Nu skall vi titta på hur menyn är uppbyggd. Den första delen av menyn är en funktion som definieras inom HEAD-taggarna. Det ser ut så här:

<SCRIPT LANGUAGE="JavaScript">
<!-- Göm
function rullGardin(meny){
var URL = document.meny.adress.options[document.meny.adress.selectedIndex].value;
window.location.href = URL;
}
// Sluta gömma -->
</SCRIPT>

Funktionen heter alltså rullGardin() och meny är namnet på det formulär som kommer att anropa funktionen. Menyn fungerar även om du tar bort innehållet ur parentesen och bara skriver rullGardin(), men jag lägger med det här för att det skall bli lättare att se vad det handlar om.

Raden var URL = ... definierar variablen URL, som används i nästa rad för att skriptet skall veta vad det skall göra med värdet som skickas till funktionen: meny är namnet på formuläret och adress är namnet på det värde som väljs i formuläret.

Resten av skriptet är ett formulär som läggs mellan BODY-taggarna, där du vill ha menyn. Det ser ut så här:

<FORM NAME="meny">
<P>Välj avsnitt i JavaScript:&nbsp;&nbsp;
<SELECT NAME="adress" SIZE="1">
<OPTION VALUE="jscript.html">Inledning
<OPTION VALUE="jscript2.html">Lägg in skriptkoden
<OPTION VALUE="jscript3.html">Rullgardinsmeny
<OPTION VALUE="jscript4.html">Bildvisning
<OPTION VALUE="jscript5.html">Öppna bild med textlänk
<OPTION VALUE="jscript6.html">Klickbar lista
<OPTION VALUE="jscript7.html">Popup-fönster
<OPTION VALUE="jscript8.html">SDN:s skript och handbok
<OPTION VALUE="jscript9.html">Skript på Internet
</SELECT>
<INPUT TYPE="button" VALUE="Öppna" onClick="javascript:rullGardin()">
</FORM>

Formulärets namn är meny, alltså samma namn som anges i funktionen. Namnet på det värde som väljs blir adress, som återkommer i definitionen av var URL i funktionen. SIZE="..." talar om hur många menyrader som skall visas innan man öppnar menyn.

Raderna med OPTION VALUE="..." anger inom citationstecknen det värde som väljs - och alltså blir innehållet i adress. Efter sluttaggen i raden skriver du in den text som skall synas i menyn.

Sedan valet väl är gjort går vi vidare till INPUT-taggen. Här har vi onClick="...", som helt enkelt säger att när besökaren klickar på knappen "Öppna" skall funktionen rullGardin() anropas och utföras. Attributet onClick är här en så kallad händelsehanterare. Den tar hand om och hanterar händelsen att besökaren klickar på knappen.

Att ändra och anpassa menyn

Det är i formuläret du gör de viktiga ändringarna för att menyn skall passa på din hemsida. Själva funktionen innehåller ingenting som du behöver ändra. Om du ändå vill göra det, bör du tänka på att vara konsekvent. Följande är viktigt för att skriptet skall fungera:

  • Om du ändrar funktionens namn, måste du göra motsvarande ändring i formulärets INPUT-tagg.
  • Om du ändrar URL i funktionen till ett annat namn på variabeln, måste du också ändra i raden under, så att variabeln har samma namn i båda raderna.
  • Om du ändrar formulärets namn meny eller det valda värdets namn adress till något annat, måste du göra motsvarande ändringar i definitionen av funktionen.

Det viktigaste är dock inte dessa kosmetiska förändringar, utan att du ser till att menyn verkligen länkar dit du vill. För varje val på menyn lägger du in en rad med

<OPTION VALUE="Adressen till länken">Den text du vill visa

"Adressen till länken" byter du mot den relativa eller absoluta sökvägen till den sida du vill öppna, till exempel så här:

<OPTION VALUE="olles.html">Olles sida

eller med en absolut sökväg:

<OPTION VALUE="http://www.SDNweden.se">Computer Club Sweden

eller om du vill länka till ett ankare som heter "akvarium" på Olles sida:

<OPTION VALUE="olles.html#akvarium">Olles sida

eller om du vill länka till ett ankare som heter "fiskar" på den redan öppna sidan:

<OPTION VALUE="#fiskar">Mina tama fiskar

För varje nytt val i menyn gör du ytterligare en rad med <OPTION VALUE ...>Den text du vill visa.

Viktigt för säkerheten!

Du skulle kunna ändra formuläret i det här skriptet och lägga in "Välj avsnitt..." direkt i formuläret, genom att ta bort raden med P-taggen och byta den mot <OPTION VALUE="">Välj avsnitt... - vilket innebär att man lämnar värdet tomt. Det är så här man oftast ser rullgardinskoden utformad. Men om besökaren då klickar på Öppna-knappen, öppnas i stället mappen där sidan med formuläret ligger, och det vill du inte! Besökaren kan då leta sig fram genom hela ditt serverbibliotek och öppna eller kopiera alla filer som ligger där.

Du kan ändå lägga in texten "Välj avsnitt..." i menyn, genom att först i listan med OPTION lägga följande:

<OPTION VALUE="#">Välj avsnitt...

Här är värdet inte tomt längre, och om man markerar Välj avsnitt och klickar på Öppna händer helt enkelt ingenting.

En annan möjlighet är att ta bort detta "Välj avsnitt..." helt och hållet ur listan och i stället lägga den texten på Öppna-knappen.

<INPUT TYPE="button" VALUE="Välj avsnitt..." onClick="javascript:rullGardin()">

Övningsuppgiften till det här avsnittet är helt enkelt att du gör en rullgardinsmeny och lägger in den på din hemsida. När du är klar med detta, och har kontrollerat i webbläsaren att allt fungerar som det skall, skickar du upp dina nya filer till servern. Öppna sedan hemsidan medan du fortfarande är uppkopplad, och kontrollera att de externa länkarna fungerar.

Kunskapstest

Lägg in skriptkoden på sidan Bildvisning med klickbara småbilder

© SupportData.Net