Tips&Tricks

til hjemmesiden, computeren og internettet

Tips & Tricks



Billede, der står fast i nederste højre hjørne af hjemmesiden

Sat på siden 31-10-2003

Vil du have et lille billede til at være i nederste højre hjørne af din skærm, uanset hvor din gæst befinder sig på din hjemmeside? Så har jeg et lille script, du kan bruge. Obs! Du skal have et basalt kendskab til html. Hvis du ikke har det, kan du hente mit gamle, men gratis, kursus i html ved at sende en mail til britt@malka.it og skrive "html-kursus" i emnelinjen.

Eksemplet kan du se på http://www.tips-og-tricks.com/eksempler/staticlogo.html

Ingredienserne er simple:
1 script kaldet "staticlogo.js"
1 billede
1 linje i html-dokumentet

=============================================

Scriptet "staticlogo" finder du her:

//Ret i de seks punkter nedenfor

// 1) Erstat 116 og 42 med bredde (width) og højde (height) på dit billede
if (document.images)
var staticlogo=new Image(210,53)

// 2) Ret stien til at passe med dit billede
staticlogo.src="malka.jpg"

// 3) Ret url'en nedenfor til at vise det sted, du vil linke til
var logolink="http://www.tips-og-tricks.com"

// 4) Ret alt-teksten til at passe med dit billede
var alttext="En raev"

// 5) Vælg enten "1" eller "0" ("1" fader billedet ind) Note: kun IE 4
var fadeintoview=1

/* 6) Til slut - variablen nedenfor bestemmer, hvor længe billedet skal være synligt (i sekunder), efter at det er kommet frem. Hvis du vil have vist billedet i fx 20 sekunder, skal du bare skrive 20. Hvis du vil have det til at blive fremme hele tiden, skal du vælge 0 (nul).*/
var visibleduration=0


///////////////////////////Ret ikke under linjen her/////////////////////////
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}


var fadeset=''
if (fadeintoview)
fadeset="filter:alpha(opacity=0)"

if (document.all)
document.write('<span id="logo" style="'+fadeset+';position:absolute; top:100;width:'+staticlogo.width+'; height:'+staticlogo.height+'"></span>')

function bringintoview(){
if (logo.filters.alpha.opacity<=95)
logo.filters.alpha.opacity+=5
else{
clearInterval(viewit)
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}


function createlogo(){
staticimage=new Layer(100)
staticimage.left=-300
staticimage.top=120
staticimage.document.write('<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}

if (document.layers)
window.onload=createlogo;

if (document.all){
w=document.body.clientWidth-logo.style.pixelWidth-5
h=document.body.clientHeight-logo.style.pixelHeight-5
logo.style.left=w
logo.style.top=h
}

function logoit(){
var w2=document.body.scrollLeft+w
var h2=document.body.scrollTop+h
logo.style.left=w2
logo.style.top=h2
}
function logoit2(){
staticimage.left=pageXOffset+window.innerWidth-staticimage.document.width-15
staticimage.top=pageYOffset+window.innerHeight-staticimage.document.height
}

function insertimage(){
logo.innerHTML='<a href="'+logolink+'"><img src="'+staticlogo.src+'" border=0 alt="'+alttext+'"></a>'
if (fadeintoview)
viewit=setInterval("bringintoview()",100)
else{
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}

if (document.all){
window.onscroll=logoit
window.onresize=new Function("window.location.reload()")
window.onload=insertimage
}


function staticitns(){
setInterval("logoit2()",90)
if (visibleduration!=0)
setTimeout("staticimage.visibility='hide'",visibleduration*1000)
}

Du behøver blot at kopiere det over i et nyt tekstdokument i Notesblok og gemme det under navnet "staticlogo.js" - husk, at sætte filtypen til alle filer, før du gemmer.

Obs! Hvis du ikke bruger Notesblok, men fx Webcoder eller Webwriter, bliver der indsat de tags, der normalt bruges på en hjemmeside, altså <html>, <head> osv. Hvis du har disse tags på JavaScriptet, virker det ikke. Brug derfor kun en teksteditor, der ikke selv indsætter koder.

Den linje, du skal indsætte i html-dokumentet - i <body>, følger her:

<script type="text/javascript" src="staticlogo.js"></script>

Hvis du har JavaScriptet liggende i en mappe for sig, skal du huske at tilføje stien til den mappe, som fx "../script/staticlogo.js" eller "script/staticlogo.js" afhængigt af, hvor dit dokument befinder sig i forhold til mappen. Prøv dig frem, hvis du er i tvivl.

Herefter skal du bare uploade din hjemmeside, scriptet og billedet til serveren.

Ahem, også tak til Cyril for dette tip. Det er godt at have en inspirationskilde så tæt på :-)

Kunne du lide tippet? Abonner gratis på mine nyhedsmails og få friske tips hver uge: Tilmelding til Tips og tricks
Lige nu: Få e-bogen "701 Tips og Tricks" gratis (normalpris $11,83) ved tilmelding.


|