Globale linker

JavaScript

Tips

1. XHTML-vennlige linker

I følge spesifikasjonen for XHTML 1.0 har target-attributtet for linker gått ut. Så hvis du prøver å lage et dokument som følger XHTML strict reglene får du ikke validert dokumentet riktig hvis du prøver å åpne linkene i nye vinduer. Og da må man jukse.

I følge spesifikasjonene har vi nå fått det nye atributtet rel for taggen <a>, og foruten en rekke forhåndsdefinerte verdier, står vi også fritt til å finne på nye verdier. For eksempel kan vi definere en verdi som ekstern for det nye attributtet, slik at koden for linken blir seendes slik ut:

Ved hjelp av JavaScript kan vi nå sjekke på alle linkene om de inneholder attributtene href og rel, og de som har rel=ekstern, skal vi da åpne i nytt vindu.

1. function eksterneLinker() {
2.   if (!document.getElementsByTagName) return;
3.   var linker = document.getElementsByTagName("a");
4.   for (var i=0; i<linker.length; i++) {
5.     var link = linker[i];
6.     if (link.getAttribute("href") &&
           link.getAttribute("rel")== "ekstern")
7.     link.target = "_blank";
8.   }
9. }
window.onload = eksterneLinker();

Dette scriptet kan med fordel kjøres på alle dine sider, og da kan scriptet plasseres i en ekstern .js-fil. Plasser da følgende kode i <head>-seksjonen av dokumentet.

2. Vise/skjule elementer (IE)

Hvis du har klikket deg gjennom sidene mine her vil du kanskje ha sett at på Qucikguidene for HTML og CSS, bestemmer du selv hva du vil se av forklaringer. Og det har jeg fått til ved hjelp av CSS og JavaScript.

For det første må elementet (taggen) som du vil skjule ha inline CSS. Det kan være en hvilkensomhelst tag du skjuler, men det er vanligst å bruke blokk-taggen </div> på slike ting.

<div id="Layer1" style="display: none">Innhold</div>

Så bruker vi JavaScript til å evaluere verdien til style-attributtets display-verdi. Vis/skjul JavaScript-koden.

Dessuten trenger vi en link som kan vise/skjule elementet, og vi adresserer elementet med et parameter som vi sender til funksjonen (vi forteller hvilket element på siden vi vil vise/skjule).

<a href="javascript:displayMenu(Layer1);">Vis/Skjul</a>

3. En enkel Swap-image (IE)

En enkel liten sak som kan brukes når du skal bytte bilder ved mouseover:

1. function swap(bildeID,kilde){
2. bildeID.src = kilde;
3. }

HTML-koden ser slik ut:

<< Forrige side