Länkar

1. Rollover-länkar

Du har kanske sett ibland när du för musknappen över en länk, att den t.ex. ändrar färg. Det kan ordnas genom olika tekniker, dels genom CSS Cascading Style Sheets, dels genom JavaScript och dels genom Java-programmering. Det jag går igenom här är tekniken med CSS. En kod kan se ut så här och jag förklarar den mer ingående nedan:

<html> <head> <title>Övningar</title> <style type="text/css">  </style> </head> <body> <center> <br><br><br><br> <a href="http://www.altavista.se" target="any_window">Länk 1 </a><br> <a href="http://www.alltheweb.com" target="any_window">Länk 2 </a><br> <a href="http://www.yahoo.se" target="any_window">Länk 3</a><br> <a href="http://www.excite.com" target="any_window">Länk 4</a><br> <a href="http://www.northernlight.com" target="any_window">Länk 5 </a><br> </center> </body> </html>

Nu har jag angivit fyra stycken underklasser till Selektorn A, vilken vi skapar länkar med. Dessa är a:link, a:active; a:visited samt a:hover och de representerar fyra olika egenskaper hos länken:

a:link: är en obesökt länk
a:active: är en länk som du håller på att välja. Du har tryckt ner musknappen på den, men ännu inte släppt upp.
a:visited: är en besökt länk och
a:hover: är en egenskap som aktiveras när du för muspekaren över länken, utan att klicka på den.

Här i exemplet har jag valt att de obesökta länkarna på skall ha den blåa standardinställningen, men att de inte skall vara understrukna (text-decoration: none). De aktiva och de besökta länkarna är inte heller understrukna, men röda. Slutligen blir länkarna understrukna och svarta, när vi för musknappen över dem.

Detta är en funktion som fungerar bäst i Internet Explorer från och med version 4.0, men dåligt i Netscapes versioner.

Nu i dagsläget är det vanligare att man väljer länkfärgen i HTML koden (attributen till body) och dess egenskaper (understruken eller inte) i CSS.

2. Ge samma typ av länkar olika egenskaper

Nu kanske vi vill att vissa obesökta länkar skall vara understrukna, medan andra inte skall vara det. Det går att ordna och så här går det till:

<html> <head> <title>Övningar</title> <style type="text/css">  </style> </head> <body> <center> <br><br><br><br> <a class="extern" href="http://www.lycos.com" target="any_window">Länk 1</a><br> <a class="extern" href="http://www.alltheweb.com" target="any_window">Länk 2</a><br> <a class="intern" href="ramar.html" target="any_window">Länk 3</a><br> <a class="intern" href="besok.html" target="any_window">Länk 4</a><br> <a class="intern" href="animation.html" target="any_window">Länk 5</a><br> </center> </body> </html>

Nu blir de externa länkarna understrukna, medan de interna inte blir det.





kontakt	© Stefan Dahlén	Tisdag 7:e oktober 2008