För att nedladdningstiden skall minimeras, används samma knappar (bilder) i alla exempel. Dessa har försetts med nummer för att det skall bli lättare att modifiera scriptet. Bilderna, dess filformat, namn och storlek, kan givetvis ändras för att passa in på din Websida. Scripten går även lätt att bygga om, med fler eller färre länkar!
Obs!
Knappar som ändrar utseende när musen förs över dem fungerar inte i Internet Explorer 3.x, då dess mycket begränsade stöd för JavaScript inte inkluderar möjlighet att byta ut bilder på sidan.

Enkel KnappMeny
btn1

btn2

btn3

btn4

 

 Standard script som fungerar bra till de flesta typer av menyer.
Lätt att redigera och bygga ut.

- Ladda ner! (14 kB) -

...eller kopiera koden:

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="Javascript">
<!--
if (document.images) {
    btn1over = new Image();
    btn1over.src = "btn_1_dn.gif";
    btn1norm = new Image();
    btn1norm.src = "btn_1_up.gif";

    btn2over = new Image();
    btn2over.src = "btn_2_dn.gif";
    btn2norm = new Image();
    btn2norm.src = "btn_2_up.gif";

    btn3over = new Image();
    btn3over.src = "btn_3_dn.gif";
    btn3norm = new Image();
    btn3norm.src = "btn_3_up.gif";

    btn4over = new Image();
    btn4over.src = "btn_4_dn.gif";
    btn4norm = new Image();
    btn4norm.src = "btn_4_up.gif";
}

function hiLite(imgDocID,imgObjName) {
    if (document.images) {
        document.images[imgDocID].src = eval(imgObjName + ".src") ;
    }
}
// -->
</SCRIPT>

</HEAD>
<BODY onLoad="window.defaultStatus='Din standard status-text';" onUnload="window.defaultStatus = '';">

<A HREF="sida1.htm"
    onMouseOver = "hiLite('knapp1','btn1over');
    window.status='Valfri text till länk 1...'; return true"
    onMouseOut = "hiLite('knapp1','btn1norm');
    window.status='Din standard status-text'; return true"><IMG
SRC="btn_1_up.gif" NAME="knapp1" WIDTH=50 HEIGHT=28 ALT="" BORDER=0></A><BR><BR>

<A HREF="sida2.htm"
    onMouseOver = "hiLite('knapp2','btn2over');
    window.status='Valfri text till länk 2...'; return true"
    onMouseOut = "hiLite('knapp2','btn2norm');
    window.status='Din standard status-text'; return true"><IMG
SRC="btn_2_up.gif" NAME="knapp2" WIDTH=50 HEIGHT=28 ALT="" BORDER=0></A><BR><BR>

<A HREF="sida3.htm"
    onMouseOver = "hiLite('knapp3','btn3over');
    window.status='Valfri text till länk 3...'; return true"
    onMouseOut = "hiLite('knapp3','btn3norm');
    window.status='Din standard status-text'; return true"><IMG
SRC="btn_3_up.gif" NAME="knapp3" WIDTH=50 HEIGHT=28 ALT="" BORDER=0></A><BR><BR>

<A HREF="sida4.htm"
    onMouseOver = "hiLite('knapp4','btn4over');
    window.status='Valfri text till länk 4...'; return true"
    onMouseOut = "hiLite('knapp4','btn4norm');
    window.status='Din standard status-text'; return true"><IMG
SRC="btn_4_up.gif" NAME="knapp4" WIDTH=50 HEIGHT=28 ALT="" BORDER=0></A>

</BODY>
</HTML>

 

Remote/Meny Script
        


Avancerat men ändå lättredigerat script som man kan bygga ut och styra hur som helst. Inkluderar möjlighet till valfri fördröjning på alla bilder (se knapp 1), som gör att man kan göra "tröga" eller animerade knappar. (se vänstermenyn på www.ullberg.net.)

- Ladda ner! (23 kB) -

...eller kopiera koden:

(OBS! Knapparna på höjden där.)
 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
    var count = 0;
    standard = new Array(4);
    for (m=0; m<=3; m++) {
        standard[m] = new Image();
    }
    standard[0].src = "btn_1_up.gif";
    standard[1].src = "btn_2_up.gif";
    standard[2].src = "btn_3_up.gif";
    standard[3].src = "btn_4_up.gif";
    over = new Array(4);
    for (m=0; m<=3; m++) {
        over[m] = new Image();
    }
    over[0].src = "btn_1_dn.gif";
    over[1].src = "btn_2_dn.gif";
    over[2].src = "btn_3_dn.gif";
    over[3].src = "btn_4_dn.gif";
    menu = new Array(5);
    for (m=0; m<=4; m++) {
        menu[m] = new Image();
    }
    menu[0].src = "bt_text1.jpg";
    menu[1].src = "bt_text2.jpg";
    menu[2].src = "bt_text3.jpg";
    menu[3].src = "bt_text4.jpg";
    menu[4].src = "text_tom.jpg";
}

function musover1() {
    if (document.images) {
        setTimeout('document.btn1.src = over[0].src', 0);
        setTimeout('document.display.src = menu[0].src', 0);
    }
}
function musout1() {
    if (document.images) {
        setTimeout('document.btn1.src = standard[0].src', 200);
        setTimeout('document.display.src = menu[4].src', 500);
    }
}

function musover2() {
    if (document.images) {
        setTimeout('document.btn2.src = over[1].src', 0);
        setTimeout('document.display.src = menu[1].src', 0);
    }
}
function musout2() {
    if (document.images) {
        setTimeout('document.btn2.src = standard[1].src', 0);
        setTimeout('document.display.src = menu[4].src', 0);
    }
}

function musover3() {
    if (document.images) {
        setTimeout('document.btn3.src = over[2].src', 0);
        setTimeout('document.display.src = menu[2].src', 0);
    }
}
function musout3() {
    if (document.images) {
        setTimeout('document.btn3.src = standard[2].src', 0);
        setTimeout('document.display.src = menu[4].src', 0);
    }
}

function musover4() {
    if (document.images) {
        setTimeout('document.btn4.src = over[3].src', 0);
        setTimeout('document.display.src = menu[3].src', 0);
    }
}
function musout4() {
    if (document.images) {
        setTimeout('document.btn4.src = standard[3].src', 0);
        setTimeout('document.display.src = menu[4].src', 0);
    }
}

// -->
</SCRIPT>

</HEAD>
<BODY onLoad="window.defaultStatus='Din standard status-text';" onUnload="window.defaultStatus='';">

<div align="center">
<IMG SRC="text_tom.jpg" NAME="display" WIDTH=110 HEIGHT=28><BR><BR>

<A HREF="sida1.htm"
    onMouseOver="musover1(); window.status='Valfri text'; return true"
    onMouseOut="musout1(); window.status='Standard text'; return true"><IMG
    SRC="btn_1_up.gif" NAME="btn1" WIDTH=50 HEIGHT=28 BORDER=0></A><BR><BR>

<A HREF="sida2.htm"
    onMouseOver="musover2(); window.status='Valfri text'; return true"
    onMouseOut="musout2(); window.status='Standard text'; return true"><IMG
    SRC="btn_2_up.gif" NAME="btn2" WIDTH=50 HEIGHT=28 BORDER=0></A><BR><BR>

<A HREF="sida3.htm"
    onMouseOver="musover3(); window.status='Valfri text'; return true"
    onMouseOut="musout3(); window.status='Standard text'; return true"><IMG
    SRC="btn_3_up.gif" NAME="btn3" WIDTH=50 HEIGHT=28 BORDER=0></A><BR><BR>

<A HREF="sida4.htm"
    onMouseOver="musover4(); window.status='Valfri text'; return true"
    onMouseOut="musout4(); window.status='Standard text'; return true"><IMG
    SRC="btn_4_up.gif" NAME="btn4" WIDTH=50 HEIGHT=28 BORDER=0></A>
</div>

</BODY>
</HTML>

WebDesign & Grafik © Tommy Ullberg 97-99