Webdesign 101: Dynamisk HTML eksempelside

Webdesign 101 » DHTML eksempler » Eksempel 1

En simpel DHTML on/off-funktion

I forbindelse med opdateringen af min webside Ikast Vejviser, har jeg effektiviseret lidt på JavaScript koden. Den hidtidige side har fungeret udmærket, men jeg har nu fundet en bedre løsning, der gør brug af onmousedown- og onmouseup-hændelserne.

Vis ved mousedown, skjul ved mouseup

Vis punkt 2 | Vis punkt 3

Andet listepunkt

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.

Tredie listepunkt

Iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

HTML kildekoden

Stylesheet kildekoden

- er for listen den samme som i CSS eksempel 1, dog med den undtagelse, at dt og dd display-værdierne er sat til none, samt at display-værdierne for dt1 og dd1 er sat til block:

JavaScript kildekoden

Bemærkninger

Bemærk, at funktionerne expandObjekt(objekt) og collapseObjekt(objekt) skal være defineret i et eksternt JavaScript modulbibliotek. Et eksempel på et sådant, der også omfatter disse funktioner, finder du på mine websider om emnet. (DHTML modulbibliotek)

Bemærk endvidere, at jeg har genbrugt HTML-koden fra CSS eksempel 1. Det er ikke den mest oplagte anvendelse. En mere oplagt anvendelse ser du på websiden Ikast vejviser.

Oprettet 10.marts 2003. Revideret 8. maj 2003.