Webdesign 101 » Dynamisk HTML » DHTML modulbibliotek

Ændring af et elements indhold

I forbindelse med udviklingen af et script til billedvisning (Se websiderne JavaScript slideshows) skulle jeg finde på en metode til at udskifte billedtekster. Der kan tænkes flere forskellige metoder til det. I denne artikel gennemgår jeg, hvad man kunne kalde den moderne metode.

Metoden baserer sig på node-begrebet, der er fastlagt i W3C's DOM (Document Object Model). F.eks er et afsnit, omsluttet af <p> . . . </p> en node. En sådan node har en række egenskaber og metoder, der kan bruges til at manipulere med noden og dens indhold. Nodens indhold er i eksemplet den tekst, der står mellem <p> og </p>. Herunder ser du et eksempel på, hvorledes der kan manipuleres med indholdet af en tekstblok (klik på hver af knapperne);

Tekst 1 Tekst 2 Tekst 3 Tekst 4 Tekst 5

De siger så meget...

HTML-kildekoden

- er meget simpel. Jeg har simpelthen givet afsnittet med dybrød skrift sin egen ID:

<p id="nytekst">
De siger så meget...
</p>

Syntaksen for ændring af <p>'ets indhold af tekst er:

var blok=document.getElementById('nytekst')
blok.firstChild.nodeValue="Den nye tekst";

Scriptet

Hvis du har læst de øvrige artikler i sektionen om et dynamisk HTML modulbibliotek, er du fortrolig med ideen om at lave en universalfunktion på formen:

function nytIndhold(objekt,text){
  var blok = findKerneObjekt(objekt);
  blok.firstChild.nodeValue=text;
}

- idet jeg ønsker uden videre vrøvl at kunne give et vilkårligt element på en webside et nyt tekstindhold ved at kalde funktionen nytIndhold() med de anførte parametre: For det første, hvilket element er der tale om, for det andet, hvilken ny tekst er der tale om.

Det er det, der sker i ovennævnte funktion. Bemærk, at jeg i de fleste af modulbibliotekets funktioner benytter nodens (elementet har jeg oftest kaldt det) style-egenskab til at ændre på indholdets form. Her er det imidlertid en grundlæggende kerneegenskab ved elementet, jeg manipulerer med, så her må jeg bruge findKerneObjekt(objekt) i stedet for findObjekt(objekt). (Se websiden om blokvariable for en forklaring om nytten af en sådan "omvej").

Denne funktion har jeg nu puttet ind i mit modulbibliotek, der indeholder både en browsersniffer og de nødvendige grundlæggende funktioner, der etablerer forbindelsen mellem et elements ID og den variable blok, der antager forskellige egenskaber, alt efter hvilken browser, der er tale om.

Ældre browsere

Ældre browsere, som f.eks. Netscape 4 og Internet Explorer 4, har ganske andre og vidt forskellige metoder til at gøre det samme. Men jeg må erkende, at jeg efterhånden synes, at livet er blevet for kort til at blive ved med at slå krøller på sig selv for at tilgodese disse browsere. (Selvom jeg gjorde meget ud af det, da jeg startede på dette modulbibliotek.)

Jeg undskylder mig selv med, at jeg prøver på at lave websider, der overholder W3C-standarderne. Det er den bedste garanti for fremtidig holdbarhed og for læselighed i udstyr, der ikke er standardudstyr - talende browsere f.eks.

Brugen af universalfunktionen

Det er min nye nytIndhold()-funktion, der står bag det lille eksempel, som jeg indledte artiklen med. Et klik på en af knapperne udløser funktionen:

<a class="panel" 
href="javascript:changeText(n)">
Tekst n</a>

- der er skræddersyet til dette eksempel, og som ser således ud:

var content = new Array("Første tekst","Anden tekst", 
"Tredie tekst", "Fjerde tekst","Femte tekst",
"Sjette tekst","Syvende tekst","Ottende tekst")
var nr=1;
function changeText(nr){
  nytIndhold('nytekst',content[nr-1])
}

Kommentarer

  1. De tekster, jeg skal bruge, lægges ind i et JavaScript Array. De fyndord, eksemplet viser, fylder tilpas meget til, at jeg ikke vil gentage dem her, men i stedet blot skriver otte korte sætninger.
  2. Den variable nr sættes til en standardværdi på 1.
  3. Klikfunktionen changeText(n) passerer et tal til funktionserklæringen, der passerer dette tal videre til nytIndhold()-funktionen.
  4. Derefter kaldes modulbiliotekets nytIndhold-funktion med de to nøvendige parametre, nemlig ID'en på det element, hvori teksetn skal udskiftes, samt en tekst, der er givet ved, at vi aftaster Arrayet'et content for dets indhold på positionen nr - 1.

Et andet eksempel

Generelt
Design
CSS
JavaScript
Navigation
Farver
Dynamisk HTML
Søgemaskine

Menuen herover er kopieret direkte fra websiden Menuknapper ved hjælp af CSS. Formålet med dén øvelse var at undgå brug af JavaScript til at lave rollovereffekter. Frem og tilbage er som bekendt lige langt, så jeg bringer event handlerne onMouseOver og onMouseOut i anvendelse igen. Her dog til et højere formål. Betragt en enkelt linie fra menuen:

<a href="[url]" 
onmouseover="skiftTekst(1);return true;" 
onmouseout="skiftTekst(0);return true;">
Generelt <br></a>

Når musen føres hen over et link i menuen, udløses funktionen skiftTekst() med et tal som parameter. Tallene går fra 1 til 8, svarende til antallet af menupunkter. Ved mouseout udføres den samme funktion, men nu med tallet 0 som parameter. Dette tal er det samme på alle menupunkterne.

Funktionserklæringen er meget mage til den, jeg allerede har gennemgået:

var linktekst = new Array(
  "F\xf8r musen hen over linksene i menuen til venstre.", 
  "Link-forklaring nr. 1",
  "Link-forklaring nr. 2", 
  "Link-forklaring nr. 3", 
  "Link-forklaring nr. 4",
  "Link-forklaring nr. 5", 
  "Link-forklaring nr. 6", 
  "Link-forklaring nr. 7", 
  "Link-forklaring nr. 8")
  var nr=0;
  function skiftTekst(nr){
    nytIndhold('link',linktekst[nr])
}

Igen har jeg udskifet de lidt lange forklaringer med nogle korte sætninger i Array'et, der selvfølgelig skal have et andet navn. Her er der også 9 punkter i Arrayet. Det første punkt, som jo i et JavaScript Array har index'et 0, svarer til det, der skal stå i forklaringsboksen, når musen ikke er over nogen af menupunkterne. Derfor skiftTekst(0) ved mouseout. Så behøver jeg heller ikke at trække 1 fra tallet nr, når Arrayet aftastes.

Konklusion

Jeg har i denne artikel vist, hvorledes du vilkårligt kan udskifte en tekst på en webside, samt med to eksempler demonstreret, hvorledes en sådan modulfunktion kan anvendes.

Et tredie eksempel finder du på websiden Slideshowets billedtekster, som egentlig var årsagen til hele denne smøre...

Og endelig er jeg blevet opmærksom på et CSS-trick, der gør det muligt at eftergøre menueksemplet aldeles uden brug af JavaScript. Se websiden CSS-Popop uden JavaScript.

God fornøjelse.

1 2 3 4 5 6 7 8 9

Oprettet: 10. februar 2003
Senest opdateret: 21. maj 2003

E-mail nyhedsbrev

En alternativ menu

Efter jeg lavede disse eksempler er jeg blevet opmærksom på en metode til at lave det uden brug af JavaScript. Se artiklen CSS-Popop uden Java­Script.

Vælg normal præsentation

Vis siden som den ser ud i udskrift Send siden til udskrift.