Ændre et elements tekstindhold
Et eksempel på en praktisk anvendelse af teknikken til at ændre et elements tekstindhold. Jeg benytter min funktion nytIndhold('element','tekst'), der er forklaret på websiden Ændring af et elements indhold.
Ved at klikke på linket herunder åbner du et nyt browservindue med en oversigt over 140 farver. Ved at føre musen hen over farverne, præsenteres deres koder og navne i den lille hvid kasse under farvetabellen.
Dette lille nyttige værktøj har jeg haft som en webside i adskillige år. Det har jeg i øvrigt stadigvæk, det er websiden Farvenavne.
På websiden ser du, at oplysningerne om farvekoder og farvenavne kommer frem i browserens statuslinie. Nu har jeg så lavet denne tabel i en anden udgave, som åbnes i et nyt browservindue. Dette nye browservindue kan åbnes fra den navigationsbjælke, der er min normale hovedmenu (men som ikke er med på disse eksempelsider).
I den sammenhæng ønskede jeg at flytte oplysningen om farvenavn og farevkode ind på siden i en lille boks, præcis som du ser det i eksemplet.
HTML-koden er den simplest tænkelige:
HTML kildekoden
<div id="infobox"> Se farvekoden her </div>
Stylesheet kildekoden:
- er der heller ikke mange ben i:
#infobox {
font-size:14px;
margin-top:15px;
border:1px solid black;
width:250px;
background:white;
padding:4px 0 4px 0;
}
JavaScript kildekoden
Funktionliteten er knyttet til mouseover-hændelsen på den a-markør, der tegner det kulørte felt:
<a href="#"
onclick="javascript:return false"
onmouseover="nytIndhold('infobox','#F0F8FF-aliceblue');return true;"
style="background: #F0F8FF; text-decoration: none"
title="F0F8FF-aliceblue"> </a>
Som du ser skabes kuløren ved at sætte background-color til den ønskede værdi. a-markørens bredde er i stylesheet'et sat til 20px; Der skal være noget i linket, for at du kan se det, og derfor er der indsat en - nonbreaking space, eller "hårdt mellemrum", som vi kalder det.
Nøglen til teksten i det hvide felt ligger i funktionskaldet nytIndhold('objekt','text').
Denne funktion er en del af mit DHTML modulbibliotek og er beskrevet i detaljer på websiden Ændring af et elements indhold.
Bemærkninger
Nu er det jo sin sag at indlæse et modulbliotek på 10 kilobyte for at udføre en enkelt funktion fra det. Jeg har derfor gjort det - som jeg også råder til i aalmindelighed - pillet de dele af modulbiblioteket ud, som er relevante for netop denne funktionalitet. Det JavaScript, der er indsat i head-delen af den HTML-fil, der skal indlæses i det nye browservindue, er derfor begrænset til et halvt dusin linier, sålunde:
if (!document.getElementById)
window.location.replace("../web102/res/html/oldbrowser.html")
else
function nytIndhold(objekt,text){
var blok = document.getElementById(objekt);
blok.firstChild.nodeValue=text;
}
Det, der sker her, er at jeg udelukker alle browsere, der ikke er kompatible med W3C's dokumentobjektmodel. Kun kompatible browsere, og det vil sige moderne browsere, kan overhovedet fortolke firstChild-referencen.
Oprettet 20. maj 2003.
