Setup voor een help file

Laat de cursor rusten op info? bij het onderwerp waar je meer van wilt weten. De tekst en uitleg verschijnt dat in het venster.

Help File creëren
info? Je kunt met markup en CSS een Help File creëren. In dit voorbeeld wordt gebruik gemaakt van een definition list, <dl>. De definition term, <dt> wordt gebruikt om het helponderwerp te benoemen. De definition description, <dd> wordt gebruikt om de helptekst te bevatten en plaatsen.

De definition description bevat een <span> die de werkelijke helptekst bevat. Met CSS wordt die span verborgen en getoond als de definiton description focus heeft of als de cursor er op rust.

Om het juiste helponderwerp meteen boven in het scherm te tonen, wanneer een gebruiker er om vraagt, heeft ieder onderwerp een eigen waarde voor het attribuut [id], zodat er middels een fractional URL rechtstreeks naar kan worden gelinkt vanuit andere documenten.

Om de gebruikte techniek van dit voorbeeld te bekijken, kun je de bron bestuderen. In de <head> van dit html-document vind je de styles waarmee het getoonde effect wordt bereikt. Met name het gedeelte na /* Dit gedeelte bevat ... is interessant.

Overigens zal één en ander niet zondermeer in Internet Explorer werken. Om het ook in die browser te laten werken, moet je de te hoveren en te verbergen/tonen teksten voorzien van een anchor. IE laat de pseudo classes :hover en :focus alleen maar werken op het anchor element.
Browser test
info? De test is opgezet met Opera v8 als testbrowser, en daarin werkt het. Om een mij onduidelijke reden gaat Firefox v1.0PR over z'n nek van de property value [overflow:auto] in de css voor de selector dd:hover span.info. Haal je die property met waarde weg, dan werkt 't ook in Firefox v1.0PR.
open help file
info? Het lijkt er op dat je deze help file al hebt geopen. Verdere uitleg is dus overbodig, me dunkt.
F1
info? De meeste Windows-programma's kennen een contextuele helpfunctie die met één druk op F1 toegankelijk is.
Windows XP: Instellen Printer
info? Via het menu 'start' ⇒ 'Printers en faxapparaten' kun je een printer toevoegen.

Belangrijk

Zoals altijd: dit is slechts een voorbeeld, bevat onvolkomenheden en is niet toegespitst op jouw specifieke situatie. Het voorbeeld is er slechts om je een idee te geven van de (technische) mogelijkheden en om je mogelijk tot inspitatie te dienen.

Dit voorbeeld is opgezet naar aanleiding van een vraag in usenet nieuwsgroep niwo: hyperlinken naar verschillende layers in targetpagina, kan dat?.

Als je dit een nuttige pagina vindt, kun je de rest van de PretLetters site eens bezoeken. Vooral het stuk over Webontwerp zou je tot nut kunnen zijn.

Misschien is de index van de testmap, waar deze pagina onderdeel van is, het waard om eens te checken. Daar speel ik met vanalles en het kan zomaar zijn dat er een pagina opduikt die relevant is voor het onderwerp van de huidige pagine die je nu voor je hebt.

Als mijn site je werkelijk bevalt en ik heb je met mijn voorbeelden of testpagina's en de uitleg wat kunnen helpen, overweeg dan een kleine contributie, zodat ik de kosten en moeite in deze site kan blijven steken. Door een kleine bijdrage helpt u mij u te helpen, en anderen. Bezoekt u alstublieft mijn pagina over contributies en donaties. Dank u,