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å :-)