Terug- of Top-knop op een vaste plaats op het scherm
Rechts onder zie je de knop:
.
Als je er op klikt ga je terug naar de vorige pagina.
Deze knop is gemaakt en gepositioneerd met behulp van CSS. Op deze bladzijde wordt beschreven hoe dat kunt aanpakken.
De code en de knoppen kun je downloaden om zelf te gebruiken.
Er worden twee items besproken:
- De opbouw en de werking van de knop
- Inbouwen in je eigen site
- De knop positioneren in het document
- De Terug-knop vervangen door een Top-knop
De knop bestaat uit één plaatje, dat met behulp van CSS op een bepaalde plaats wordt gezet. Op deze pagina is dat
rechts onder, maar je kunt het natuurlijk neerzetten waat je wilt.
Door de opmaak van de rand om de knop lijkt het alsof de knop boven de bladzijde uitsteekt. Dat is gedaan door het plaatje
in CSS de eigenschap border-style:outset te geven, in combinatie met border:2px solid #ccc;.
De border moet minimaal 2px breed zijn, anders zie je het effect niet. De kleur #ccc staat voor
lichtgrijs. De kleur-nuances worden gemaakt door de eigenschap outset.
Als je met de muis over de knop gaat lijkt het of die wordt ingedrukt. Als je met de muis van de knop af gaat komt die weer
omhoog. Dat effect wordt bereikt met de event-handlers onmouseover en onmouseout, waarmee de eigenschap border-style
wordt veranderd, van outset in inset en omgekeerd.
Het plaatje met zijn eigenschappen is opgenomen in een 'gewone' <A>-tag. Die zorgt er voor dat je teruggaat naar de
vorige bladzijde.
De code staat onderaan de bladzijde uitgewerkt.
Om dit in te bouwen in je eigen site plaats je een <div>-tag ergens aan het begin van de <BODY>.
Deze heeft een uniek id. Op deze bladzijde is id="TerugKnop" gebruikt. De <div>-tag bevat
alléén de <a>-tag die hiervoor is genoemd.
In de <HEAD> zet je een style-block neer, waarmee het id="TerugKnop" wordt opgemaakt.
De style voor id="TerugKnop" wordt twee keer genoemd. Zie ook de code onderaan de bladzijde
- Voor id="TerugKnop" zelf. Daarmee wordt de knop gepositioneerd
- Voor de plaatjes binnen id="TerugKnop". Daarmee wordt het plaatje (lees: de knop) opgemaakt.
De knop staat op een vaste plek in het window. Dat bereik je met position:fixed; in combinatie met display:block;.
Sommige (oudere) browsers maken een block onzichtbaar (dus: display:none;) als je position:fixed; gebruikt. Met
display:block; omzeil je dat.
Om te zorgen dat de knop niet achter andere elementen van het document verdwijnt is z-index:50 opgegeven. Soms zal een
hogere waarde nodig zijn. In andere gevallen kan z-index worden weggelaten. Dat hangt af van de opbouw van het betreffende
document.
De plaats waar de knop verschijnt bepaal met left of right (voor de horizontale positie) en top
of bottom (voor de verticale positie). Hier is gebruikt: right:0; bottom:0. Dat wil zeggen: 0 pixels gemeten van
de onderkant en 0 pixels van rechts. De knop staat hierdoor in de rechter onderhoek.
Je kunt de knop neerzetten waar je maar wilt. Zo zet je met top:0 en left:0 de knop in de linker bovenhoek. Met
top:10px; right:20px; komt de knop ongeveer rechtsboven,.
Als alternatief kun je hier margin gebruiken. Hier in gebruikt: margin-right:20px; margin-bottom:20px;
Je kunt de knop neerzetten waar je maar wilt. Rechtsonder is 'gevoelsmatig' een goede plek.
De achtergrond van het blok waar de knop in staat is transparantent gemaakt met background:transparent;. Dat is nodig
om het blok met id="Terugknop" dat buiten het plaatje uitsteekt onzichtbaar te maken.
Overigens heeft het plaatje zelf (terugknop.gif) ook een transparante achtergrond. Zo krijg je een doorzichtige knop.
Tenslotte: er is ook nog overflow:hidden;. Dat is alleen nodig als je heel brede knoppen maakt, bijvoorbeeld over bijna
de hele breedte van de pagina. Als je gewone, kleinere, knoppen maakt zoals op deze bladzijde, kun je het zonder bezwaar weglaten.
Om helemaal perfect op zijn plaats te krijgen kun je nog wat spelen met de margin en de padding van het plaatje zelf
(in het style-block #Terugknop img).
Het vervangen van de Terug-knop door een Top-knop.
Zie ook de code onderaan de bladzijde. Je moet twee dingen aanpassen:
- Vervang in de img-tag het plaatje terugknop.gif door topknop.gif. Je vindt de plaatjes
in de downloadfile. Pas ook de afmetingen aan. De terug-knop heeft width="86" en height="18",
de top-knop heeft width="70" en height="25".
Uiteraard verander je ook het alt-attribuut.
- Vervang in de <a>-tag:
href="javascript:history.go(-1)"
door
href="javascript:scrollTo(0,0)"
- Natuurlijk kun je ook je eigen plaatjes gebruiken voor de knop.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
De code ziet er als volgt uit:
(Zet dit in de <HEAD>).
<style>
#TerugKnop {position:fixed; display:block; width:100px; height:30px;
bottom:0; right:0; background:transparent; overflow:hidden;
margin-right:20px; margin-bottom:20px; padding:0; z-index:50;}
#TerugKnop img {border:2px solid #ccc; padding:1px 2px; margin:0 5px;
border-style:outset }
</style>
(Zet dit in de <BODY>, bijvoorkeur aan het begin).
<div id="TerugKnop"> <!-- Terug-knop -->
<a href="javascript:history.go(-1)"><img src="terugknop.gif" alt="Terug naar de vorige bladzijde" width="86" height="18" border="0" onMouseOver="this.style.borderStyle='inset'" onMouseOut="this.style.borderStyle='outset'"></a>
</div> <!-- Terug-knop -->
Code voor een Top-knop vind je in de downloadfile.
Downloaden:
Druk op de knop:
File: voorb278.zip, 3755 bytes.
Opmerking:
Van deze code is ook een JavaScript versie beschikbaar. Zie daarvoor Over
het scherm scrollende Top-knop. Die versie is vooral bedoeld voor wat oudere websites. De aanpak op deze bladzijde
heeft de voorkeur.
