[next][previous][contents]

14. Simpla JavaScripts

Ibland kan det vara passande att snygga upp en sida med JavaScripts. Det går att använda dem till mycket (antar jag), men själv har jag mest använt dem till att byta ut en bild då och då (när man för musen över en länk). Ett JavaScript inkluderas nånstans i HTML-filen (eller infogas som en .js-fil, jag har inte testat det), och anropas sen någonstans ifrån. En länk har t.ex. lite olika events som kan fås att aktivera ett script, de jag känner till är OnMouseOver, OnMouseOut och OnClick. Vill man så kan man sätta scriptet rätt in i länken.

Vi ger oss direkt på att göra ett litet script.

<A HREF="HTML-HOWTO-13.html"
OnMouseOver="document.images['pingvin1'].src='peng3.gif'; return true;"
OnMouseOut="document.images['pingvin1'].src='peng.gif'; return true;"><IMG
SRC="peng.gif" NAME="pingvin1" BORDER=0></A>

För vi istället musen över den här <A HREF="HTML-HOWTO-13.html"
OnMouseOver="window.status='Moahahahha...'">länken</A> så ska
status-raden ändras...
Ger resultatet:
För vi istället musen över den här länken så ska status-raden ändras...
En "return true" tror jag var nödvändig av någon anledning...ta med den om du vill.

document.images['platsens_namn'].src används alltså tydligen för att ändra vilken bild som ska vara laddad på en viss plats. Observera att bilderna som laddas till en viss plats måste vara av samma storlek, annars blir allt fel. OnMouseOver laddar den röda pingvinen, OnMouseOut laddar åter den gula pingvinen.

Window.status är väl en smågullig liten sak...ser ibland snyggare ut om man väljer texten i statusraden istället för att ha en URL. Om man orkar skriva det så...

Jag vet inte om du tyckte den koden var krånglig. Hursomhelst vet jag inte om jag kan förklara så detaljerat exakt hur ett lite mer avancerat script fungerar. Jag plockar in scriptet som sköter bilderna på min egen hemsida och kommenterar det lite så hoppas jag det räcker. När man skriver JavaScripts så antar jag att det kräver lite egen kreativitet och experimenterande.

<!-- Det här scriptet används
 på come.to/woc. Ta vad du vill. //-->

<SCRIPT LANGUAGE="JavaScript">

<!--
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion); 

if (browser_name == "Netscape" && browser_version >= 3.0) { brow = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { brow = 'true'; }
else { brow = 'false'; }

function byt(plats,stat)
        {
        if (brow == 'true')
                { 
                if (plats == 'nav1') {name = '1_woc'}
                if (plats == 'nav2') {name = '2_maila'}

                [snip]
		
		
                if (stat == 'over')
                        {
                        document.images[plats].src = "navp_24_"+name+"_on.gif"
                        document.images['status'].src = "navp_28_"+name+".gif"
                        }

                if (stat == 'out')
                        {
                        document.images[plats].src = 'navp_24_'+name+'_off.gif'
                        document.images['status'].src = 'navp_28_0_main.gif'
                        }
                }
        }
                
//-->

</SCRIPT>
Och scriptet anropas med såna här länkar: 
<A HREF="01_woc.html" OnMouseOver="byt('nav1','over');"
OnMouseOut="byt('nav1','out');"><IMG SRC="navp_24_1_woc_off.gif" NAME="nav1" ALT="WoC"
WIDTH=92 HEIGHT=25 BORDER=0></A><BR> 
<A HREF="02_maila.html" OnMouseOver="byt('nav2','over');"
OnMouseOut="byt('nav2','out');"><IMG SRC="navp_24_2_maila_off.gif" NAME="nav2"
ALT="Maila" WIDTH=92 HEIGHT=29 BORDER=0></A><BR>
Hmmm...svårt att förstå hur det funkade? Varje länk skickar till scriptet vilken knapp den är i ordningen ("nav1" osv...), och vad man gör just nu, för musen över eller av knappen. De två värdena kommer in i funktionen "byt", som "plats" och "stat". Därefter kan de sedan utvärderas i scriptet, användas osv. I början på scriptet har jag nåra rader så att jag ska kunna veta vilken fil som ska laddas genom att titta på vilken knapp jag är på. Förutom att ladda en bild ovanpå varje knapp laddar jag också in en bild för varje menyalternativ i en status-ruta...

De kryptiska raderna överst, med "brow" och det där används för att kolla om man har en browser som klarar av JavaScripts...

I slutet på min hemsida körs ett litet script till. Det är till för att precacha alla bilderna, så att de laddas bums, och man slipper att få en fördröjning när man väl för musen över menyn. På detta sätt kan man göra med alla möjliga bilder, så fort lite bandbredd blir ledig laddas bilden, och man slipper att vänta på det sen. Så här ser det scriptet ut:

<SCRIPT LANGUAGE="JavaScript">
<!--//
browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion); 
if (browser_name == "Netscape" && browser_version >= 3.0) { brow = 'true'; }
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) { brow = 'true'; }
else { brow = 'false'; }


if (brow == 'true') 
{
blarf1=new Image(92,25);blarf1.src="navp_24_1_woc_on.gif";
blarf2=new Image(92,29);blarf2.src="navp_24_2_maila_on.gif";

[snip]

}
// -->
</SCRIPT>
Mer tänker jag nog inte ta upp om JavaScripts i den här HOWTOn. Vill du lära dig större saker om JavaScript får du söka dig nån annan stans, det finns arkiv för sånt.

[next][previous][contents]