Link beskrivelse

En beskrivende tekst vises et andet sted på siden, når du kører musen over dine links.

Scriptet kan opsættes med så mange links, du ønsker. Du har også fuld kontrol over, hvor på siden den beskrivende tekst skal skrives og hvordan den skal se ud.

Javascript

Eksempel >>

Sådan gør du:

Scriptet består af tre dele ... et script, nogle links og nogle tilhørende linktekster. De tre ting kan indsættes uafhængigt af hinanden i din html.

Trin 1

Indsæt denne script kode enten i det <head> eller dit <body>:

<script>

//Script hentet fra @-beynder
//http://www.a-begynder.dk
//Stedet for webmasters ... vi har næsten alt til hjemmesider
//----------------------------------------------------------

//Her skriver du dine link beskrivelser. Lav evt. flere
var linktext=new Array()
linktext[0]="Besøg @-begynder ... masser at gratis scripts"
linktext[1]="@-begynder ... stedet for seriøse webmasters"
linktext[2]="<center>@-begynder<br>Vi kan næsten alt ...<br>... blandt andet :-)</center>"

var ns6=document.getElementById&&!document.all
var ie=document.all

function show_text(thetext, whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}

function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=' '
else if (ns6) document.getElementById(whichdiv).innerHTML=' '
}

</script>

Definer selv teksterne markeret med rødt. Hvis du vil have flere end tre links, kan du bare tilføje flere linier. Husk at ændre tallet i den firkantede parentes, så de er fortløbende fra nul og frem.

Bemærk at det er muligt at anvende html koder i teksterne til fx at angive fed, kursiv, linieskift og/eller justering som vist i det sidste eksempel - linktext[2].

Trin 2

Dine links indsætter du, hvor du vil på siden. Indsæt denne javascript kode i dine <a> tags:

onMouseover="show_text(0,'div1')" onMouseout="reset('div1')"

Tallet "0", skrevet med blåt, angiver link beskrivelsen. Den skal ændres i dine links, så tallet svarer overens med nummeret på den pågældende link beskrivelse.

Det kan fx se således ud:

<a href="http://www.a-begynder.dk" onMouseover="show_text(0,'div1')" onMouseout="reset('div1')"> @-scripts</a> |
<a href="http://www.a-begynder.dk" onMouseover="show_text(1,'div1')" onMouseout="reset('div1')">Webmasters</a> |
<a href="http://www.a-begynder.dk" onMouseover="show_text(2,'div1')" onMouseout="reset('div1')">@-begynder</a> |

Bemærk at de blå tal passer til de respektive link beskrivelser.

Trin 3

Det sidste, du skal gøre, er at indsætte denne kode, der hvor du vil have linkteksterne vist.

<div style="color: #0000ff; font-family: 'arial'; font-size: 12px; font-weight: bold">
<span id="div1"> </span>

</div>

Definer selv hvordan dine tekster skal se ud ved at ændre værdierne markeret med rød. Bemærk at font-weight kan være enten bold (fed) eller none (almindelig).

Det færdige html dokument <html>

<head>


<script>

//Script hentet fra @-beynder
//http://www.a-begynder.dk
//Stedet for webmasters ... vi har næsten alt til hjemmesider
//----------------------------------------------------------

//Her skriver du dine link beskrivelser. Lav evt. flere
var linktext=new Array()
linktext[0]="Besøg @-begynder ... masser at gratis scripts"
linktext[1]="@-begynder ... stedet for seriøse webmasters"
linktext[2]="<center>@-begynder<br>Vi kan næsten alt ...<br>... blandt andet :-)</center>"

var ns6=document.getElementById&&!document.all
var ie=document.all

function show_text(thetext, whichdiv){
if (ie)
//En service fra http://www.a-begynder.dk
eval("document.all."+whichdiv).innerHTML=linktext[thetext]
else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
}

function reset(whichdiv){
if (ie) eval("document.all."+whichdiv).innerHTML=' '
else if (ns6) document.getElementById(whichdiv).innerHTML=' '
}

</script>


</head>

<body>



<a href="http://www.a-begynder.dk" onMouseover="show_text(0,'div1')" onMouseout="reset('div1')"> @-scripts</a> |
<a href="http://www.a-begynder.dk" onMouseover="show_text(1,'div1')" onMouseout="reset('div1')">Webmasters</a> |
<a href="http://www.a-begynder.dk" onMouseover="show_text(2,'div1')" onMouseout="reset('div1')">@-begynder</a> |



<div style="color: #0000ff; font-family: 'arial'; font-size: 12px; font-weight: bold">
<span id="div1"> </span>

</div>

</body>

</html>

Eksempel >>

Bemærk:

Som scriptet ser ud her, kan du "kun" have et sæt links på siden. Det kan dog lade sig gøre at benytte samme script to gange på samme siden og dermed få effekten to forskellige steder, som vi har gjort i eksemplet ovenfor ... se andet hint herunder.

Hint:

Hvis du bruger css, kan du style dine links og linksbeskrivelser ved brug af class-attributten.

I dine links indsætter du bare en class således:

<a class="minstyle" href="http://www.a-begynder.dk" onMouseover="show_text(2,'div1')" onMouseout="reset('div1')">@-begynder</a>

Ved link beskrivelserne skal du også anvende en class-attribut i stedet for at indsætte stylen direkte. Så kommer koden til link beskrivelserne til at se således ud i stedet:

<div class="minstyle">
<span id="div1"> </span>
</div>

Hint:

Det er muligt at bruge samme script to gange på samme side, hvis du ellers har lidt erfaring med html og/eller javascript.

Det gør du ved at lave endnu et sæt <a> tags, hvor du bare ændrer div'en (ovenfor angivet som "div1" i alle links) til fx div2.

Derefter indsætter du koden til link beskrivelserne, der hvor du vil have de andre beskrivelser på siden. Her skal du så også ændre div1 til div2.

Link beskrivelserne i selve scriptkoden kan du nummerere fortløbende, som om du bare tilføjer flere links. Husk at tilpasse numrene i de nye <a> tags så de passer sammen.

Til toppen >>

Annoncer her ...!