|
Hyperlinks
Het weergeven van hyperlinks met verschillende kleuren wordt gedaan door
middel van CSS. Als je er bijvoorbeeld met de muis overheen gaat verandert
de kleur. Of een bezochte link verandert van kleur zoals hier in het menu
ook gebeurd. Allemaal CSS. Ik ga je laten zien hoe dit gebeurt!
<style type="text/css">
a:link {color: #XXXXXX}
a:visited {color: #XXXXXX}
a:hover {color: #XXXXXX}
a:active {color: #XXXXXX}
</style>
Bij XXXXXX moet je natuurlijk je eigen Hexcode invullen.
| a:link |
Een gewone, nog onbezochte link |
| a:visited |
Een bezochte link |
| a:hover |
De kleur waarin de link verandert als je er met de muis
overheen gaat. |
| a:active |
Een active link. Dus een link waar je net op geklikt
hebt. |
Let wel op de volgorde! Als je een andere volgorde neemt gaat het niet
goed. Ik zou zeggen neem deze volgorde gewoon over. Zo staan ze goed en
kan er niets fout gaan. Hier moet je namelijk op letten!
- a:hover MOET na a:link komen.
- a:hover MOET na a:visited komen.
- a:active MOET na a:hover komen.
Een andere volgorde is dus niet mogelijk.
a:link {color: #XXXXXX}
a:visited {color: #XXXXXX}
a:hover {font-size: 150%} |
Deze link word groter als
je er overheen surft. Zoals je ziet worden deze letters 50% groter
dan dat ze al waren. |
a:link {color: #XXXXXX}
a:visited {color: #XXXXXX}
a:hover {font-family: verdana} |
Het lettertype veranderen. |
a:link {color: #XXXXXX; text-decoration:
none}
a:visited {color: #XXXXXX; text-decoration: none}
a:hover {text-decoration: underline}
|
Een streep onder een link
zetten. |
a.three:link {color: #XXXXXX}
a.three:visited {color: #XXXXXX}
a.three:hover {background: #XXXXXX}
|
Achtergrondkleur van de link
veranderen. |
De doelen bij de links in CSS blijven hetzelfde als bij HTML
dus gewoon zo:
| Target: (Doel) |
Voorbeeld code: |
Voorbeeld link: |
| _blank |
<a href="http://www.hotmail.com/"
target="_blank" >Hotmail</a> |
Hotmail |
| _parent |
<a href="http://www.hotmail.com/"
target="_parent" >Hotmail</a> |
Hotmail |
| _self |
<a href="http://www.hotmail.com/"
target="_self" >Hotmail</a> |
Hotmail |
| _top |
<a href="http://www.hotmail.com/"
target="_top" >Hotmail</a> |
Hotmail |
Uitleg link doeleinden:
- _blank
De link wordt in een nieuw venster geopend.
- _parent
Pagina verschijnt in hetzelfde frameset vanwaar het actieve document
is aangeroepen. Er zijn hier geen frames dus vandaar dat _parent het
niet doet bij het voorbeeld.
- _self
De pagina verschijnt in het frame zelf. Dit doel hoef je niet in te
voeren want dit is standaard bij frames.
- _top
Pagina verschijnt bovenop de huidige pagina in de gehele browser (De
frames verdwijnen dus)
Zoals je ziet heb je de meeste alleen maar nodig bij het gebruik van
frames. Gebruik je geen frames dan zou ik alles in een nieuw venster laten
openen! Dat kan zeer makkelijk door deze code in de header van je document
te zetten:
<base target="_blank">
Dit kan tevens met andere targets!
Meerdere links verschillend laten kleuren? Maak dan pseudoniemen aan!
<style type="text/css">
a.1:link {color: #XXXXXX}
a.1:visited {color: #XXXXXX}
a.1:hover {color: #XXXXXX}
a.1:active {color: #XXXXXX}
a.2:link {color: #XXXXXX}
a.2:visited {color: #XXXXXX}
a.2:hover {color: #XXXXXX}
a.2:active {color: #XXXXXX}
</style>
<a class="1" href="index.php" target="_blank">Link
1</a>
<a class="2" href= "index.php" target="_blank">Link
2</a>
|
