Forskellige typer af links

Links uden javascript

  1. Et almindelig link:  (Prøv:  kongehuset) <a href="http://www.kongehuset.dk">kongehuset</a> Det der står i href'en er det sted man går hen. Det kan være et servernavn som her, eller en anden side på den server vi kører på -- I så tilfælde kan man udelade "http://".

  2. Et anker-link; <a href="http://www.kongehuset.dk#ankernavn">kongehuset</a> bruges når der er et anker på formen <a name="ankernavn">kongehus tekst</a> på siden. Så vil ovenstående link gå til siden www.kongehuset.dk og scrolle ned på siden så linien med ankeret stod øverst.

    Skriver man "#" i href´en går linket ikke nogen steder hen.

  3. Et target-link til en anden frame: (Prøv:  kongehuset) <a href="http://www.kongehuset.dk" target="framenavn">kongehuset</a> Hvis der er en frame med navnet "framenavn" vil ovenstående link gå til www.kongehuset.dk i denne frame

    Hvis der ikke er en frame med navnet "framenavn" vil den åbne et nyt vindue.

  4. Et target-link til top framen: (Prøv:  kongehuset) <a href="http://www.kongehuset.dk" target="_top">kongehuset</a> vil åbne linket i topframen af den frame man befinder sig i.

  5. Et link der åbner et nyt tilfældig størrelse vindue:  (Prøv: kongehuset) <a href="http://www.kongehuset.dk" target="_blank">kongehuset</a>
  6. Et billed som link:  (Prøv:  ) <a href="http://www.kongehuset.dk"> <img src="smiley.gif" border="0"></a> Et billed bruges som link ved at anbringe billedet i stedet for tekst. Fordelen ved at bruge a-tagget er dels at man kan bruge href og derfor kan undgå javascript, men også at man kan få curseren til at være en hånd så det alene heraf fremgår at der er tale om et link.

  7. En input type submit som "link":  (Prøv:  )
  8. <form action="http://www.kongehuset.dk"> <input type="submit" value="Link" name="link"> </form> En input type submit kan bruges som link ved at lave en submit-button i stedet for tekst og skrive url´en i action-delen af formen.

    I url´en kommer "?link=Link" med som parameter. Denne parameter har man så mulighed for at bruge på den side man submitter til.

    Denne måde er den eneste måde hvorpå et link (uden brug af javascript vel at mærke) kan komme til at se ud og opføre sig som en knap.

    En input type button submitter ikke så den kan man ikke (uden brug af javascript) få til at virke som et link.

  9. En input type image som "link":  (Prøv:  )
  10. <form action="http://www.kongehuset.dk"> <input type="image" src="smiley.gif" value="1" name="billed1"> </form> En input type image kan bruges som link ved at lave en input type image i stedet for tekst og skrive url´en i action-delen af formen.

    I url'en kommer billedklikkets koordinater med som fx "?billed1.x=15&billed1.y=10". Disse koordinater har man så mulihed for at bruge på den side man submitter til.

  11. At få en submit-knap til at ligne et link vha. css:  (Prøv: )
  12. <form method="get" action="http://www.kongehuset.dk"> <input type="submit" name="send" style="color:purple; background-color:#ffffff; border-color:#ffffff; border-bottom:none; border-left:none; border-right:none; border-top:none; text-decoration:underline; Cursor:hand;" value="send"> </form> Det opfører sig dog ikke helt som et link da man godt kan se knap-effekten når man klikker på linket.

    Man får parameteren "?send=send" sendt til den side man submitter til. Jeg har sat method="get" da den side jeg her submitter til ikke tillader posts.

Links med javascript der ikke giver script-fejl hvis man ikke har javascript

  1. Et link der åbner et størrelsesmæssigt forudbestemt vindue: (Prøv: kongehuset) <a href="http://www.kongehuset.dk" target="Kongehuset" onclick="window.open('',this.target, 'scrollbars=yes,menubar=yes,width=800,height=600,top=1, left=1,status=yes');return true">kongehuset</a> Den side der skal gås til i det nye vindue står i href. Da siden man står på ikke skal ændres indeholder target et navn.

    Window.open har 3 parametre: den første er url´en, den anden er navnet på det vindue man skal åbne url´en i og den tredie er størrelsen og udseendet på det vindue man skal gå til.

    Target-navnet bliver i onclicket vha. window.open lavet til navnet på det vindue man åbner.Da der ikke står noget i url´en åbnes et tomt vindue.

    Onclick-eventet skal returnere true hvis man skal gå til et link (enten på siden eller i et vindue) og false hvis linket ikke skal gå nogen steder hen.

    Da der står "return true;" til sidst i onclick vil a-tagget derfor forsøge at åbne det der står i href´en i det windue der hedder "kongehuset". Da der på dette tidspunkt findes et nyåbnet vindue med dette navn vil den side der står i href´en blive vist i dette vindue.

    Man kan naturligvis også erstatte "window.open(..)" med et javascript-funktionskald, men "return true" skal altså stadig være der.

    Det virkelig smarte ved denne form for link er at det også vil virke hensigtsmæssigt i browsere der ikke forstår javascript idet det der står i "onclick" bare vil blive ignoreret i sådanne tilfælde og så står der jo <a href="http://www.kongehuset.dk" target="Kongehuset">kongehuset</a> hvilket jo virker ved at der åbnes et ikke størrelsesbestemt vindue.  (Prøv: kongehuset)

  2. Et billed-link der åbner et størrelsesmæssigt forudbestemt vindue: (Prøv: ) <a href="http://www.kongehuset.dk" target="Kongehuset" onclick="window.open('',this.target, 'scrollbars=yes,menubar=yes,width=800,height=600,top=1, left=1,status=yes');return true"> <img src="smiley.gif" border="0"></a> Teknikken er den samme som før blot er teksten erstattet af et billed.

    Også her vil der virke hensigtsmæssigt i browsere der ikke forstår javascript.

  3. input type image som "link", der åbner et størrelsesmæssigt forudbestemt vindue:   (Prøv:  )
  4. <form action="http://www.kongehuset.dk" target="kongehuset" onsubmit="window.open('',this.target, 'scrollbars=yes,width=800,height=600,top=1, left=1,status=yes,resizable=yes');return true"> <input type="image" src="smiley.gif" value="Open Window" name="open"> </form> Det smarte er her igen at det også vil virke hensigtsmæssigt i browsere der ikke forstår javascript idet det der står i "onsubmit" bare vil blive ignoreret i sådanne tilfælde og så står der jo <form action="http://www.kongehuset.dk" target="kongehuset"> <input type="image" src="smiley.gif" value="Open Window" name="open"> </form>
    hvilket jo virker ved at der åbnes et ikke størrelsesbestemt vindue.  (Prøv: )
    I url´en kommer billedklikkets koordinater med som fx. "?open.x=12&open.y=25 og disse kan man så bruge på den side der submittes til.

  5. input type submit som "link", der åbner et størrelsesmæssigt forudbestemt vindue:   (Prøv:  )
  6. <form action="http://www.kongehuset.dk" target="kongehuset" onsubmit="window.open('',this.target, 'scrollbars=yes,width=800,height=600,top=1, left=1,status=yes,resizable=yes');return true"> <input type="submit" value="Open Window" name="open"> </form> Det smarte er her igen at det også vil virke hensigtsmæssigt i browsere der ikke forstår javascript idet det der står i "onclick" bare vil blive ignoreret i sådanne tilfælde og så står der jo <form action="http://www.kongehuset.dk" target="kongehuset"> <input type="submit" value="Open Window" name="open"> </form>
    hvilket jo virker ved at der åbnes et ikke størrelsesbestemt vindue.  (Prøv: )
    I url´en kommer parameteren "?open=Open+Window" med og den kan så bruges på den side man submitter til.

  7. avanceret åbning af nyt vindue vha. javascriptfunktion i onclick:   (Prøv:  kongehuset) <a href="http://www.kongehuset.dk" target="Kongehuset" onclick="open_window('',this.target);return true"> kongehuset</a> Der kræves dog en hel del javascript i funktionen open_window for at få denne effekt.

    Men hvis man ikke har javascript åbner vinduet bare i et ikke størrelsesmæssigt forudbestemt vindue.

  8. En simulering af et knap-link vha javascript i onclick:   (Prøv  Til Kongehuset) <a href="http://www.kongehuset.dk" onMouseDown="document.images['frem'].src='frem_down.gif';" onMouseUp="document.images['frem'].src='frem_up.gif';" onMouseOut="document.images['frem'].src='frem_up.gif';"> <img src="frem_up.gif" id="frem" name="frem" width="29" height="21" alt="Til Kongehuset" border="0" align="top"></a> På denne måde kan man altså komme udenom problemet med at et link ikke kan se ud som en knap uden at bruge input-type submit og man kan oven i købet bruge andet end tekst på knappen.

    Har man ikke javascript slået til vil det bare være et almindeligt billedlink.

  9. Et link kun til udførsel af javascript:  (Prøv: uvirksomt link) <a href="#" onclick="alert('Linket er uvirksomt her\r men kunne f.eks bruges til\r at ændre indholdet i en anden ramme');return false"> uvirksomt link</a> Bemærk at der skal så stå ";return false" i onclick for at den ikke forsøger at linke et sted hen!
    I dette tilfælde ville et manglende "return false;" resulterer i at den går til siden selv med en uhensigtsmæssig # stående i url´en.

    Javascriptet kunne selvfølgelig også have været en window.open(..) o.l.

    Også i dette tilfælde ville der ikke komme script-fejl hvis man ikke har javascript slået til, der ville blot ikke ske nogen reaktion ved at trykke på linket.

  10. Validering af brugerinput på klient-siden:  

    Vha. javascript kan man validere input fra steder hvor javascript er slået til, men samtidig kan man sørge for at javascriptet bare bliver ignoreret hvis javascript er slået fra.

    <script language="JavaScript"> <!-- function validate(form) { if (form.antal.value!=7) { alert('Nej svaret er forkert. Prøv igen!'); form.antal.focus(); return (false); } return(true) } //--> </script> <form action="http://www.kongehuset.dk" method="post" name="minform" onsubmit="return validate(minform);"> hvor mange dage er der i en uge ? <input type="text" size="5" value="" name="antal">&nbsp; <input type="submit" value="send"> </form>
    (Prøv: hvor mange dage er der i en uge ?  )
    Ovenstående form submitter til en side der ikke er beregnet til det, hvilket bevirker en fejl, men det er jo kun et eksempel.

    Man kan kun bruge javascript formvalidering til at lave venligere brugergrænseflade man slipper ikke for at validere data på serversiden da valideringen på klientsiden ikke nødvendigvis har fundet sted.

Hvad "javascript:" skal bruges til

  1. Link der dynamisk ændre denne sides indhold:   (Prøv:  skift til javascriptdefineret side) <a href="javascript:'<html><body>Hello</body></html>'"> skift til javascriptdefineret side</a> Dette er den eneste anvendelse af "javascript:" i en href der bør benyttes dels fordi det er det "javascript:" oprindelig er opfundet til og dels fordi det er meget browserafhængigt hvordan anden brug af "javascript:" i href'en vil opføre sig. Strengen kan naturligvis erstattes af et funktionskald til en javascript-funktion der returnerer en streng.

    Hvis man ikke har javascript slået til vil den forsøge at linke til en side med navnet "javasript: ..." så brug aldrig "javascript:" i en href hvis der er mulighed for besøg af folk uden javascript slået til.