Gå til forsiden   Tips & Tricks, søgemaskiner, optimering, webhoteller, layout, design og meget mere Gratis grafik - knapper, gif, billeder, ikoner m.m. FrontPage - alle kan lave hjemmesider Læs interessante artikler om web og Internet Prøv vores Online Tools ... vi genererer dine koder Scripts inddelt i kategorier

hjemmesider

scripts script scripting koder asp dhtml html java javascript javascripts css funktioner programmering web
tips tricks scripts script scripting funktioner søgemaskiner webhoteller layout webdesign server optimering html hjemmesider programmering web ftp

Hvis du finder fejl i vore links eller scripts, vil vi blive glade for en ...
Fejlmelding >>
scripts, scripting, script, koder, tips, tricks, asp, dhtml, html, java, javascript, javascripts, css, funktioner, password, login, brugerbeskyttelse, print, hjemmesider, hjemmeside, homepage, websted, websteder, webprogrammering, programmering, web
hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering

hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering

Introside ... splash screen

Forskellige tekster og/eller billeder vises et ad gangen i en bestemt rækkefølge, hvorefter den besøgende automatisk sendes videre til din startside ... eller en hvilken som helst anden side.

På engelsk kaldes det en splash screen, fordi billeder og tekster næsten bliver kastet i hovedet på den besøgende. Dette script er virkelig velegnet som introside på dit websted.

Splash screens er egentlig ikke nye, men normalt opnås effekten ved automatisk at sende den besøgende gennem en række ens sider med forskellige tekster. Det nye ved dette script er, at du får mulighed for at klare det hele på én og samme side.

Javascript

Eksempel >>

 

Sådan gør du:

Introsiden består af flere dele ... både script og almindelig html.

For at gøre det lidt lettere for vores besøgende, har vi derfor lavet hele html dokumentet herunder. Du kan bare følge forklaringerne indsat i koden.

Definer selv værdierne markeret med rødt.

Du finder en uddybende forklaring efter selve html-koden.

Det færdige html-dokument <html>

<head>
<title>Intro-side fra @-begynder ...</title>
</head>

<body bgcolor="#000000">

<div id="splashcontainer" style="position:absolute;width:500px;"></div>

<layer id="splashcontainerns"></layer>

<script language=javascript>
<!-- Javascript starter her

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

// Her skriver du url til billeder du evt. skal bruge.
// Senere refereres til billederne - fx preloadimage[1]
var preloadimages=new Array()
preloadimages[0]='<img src="billede1.gif">'
preloadimages[1]='<img src="billede2.jpg">'


// Definer tidsinterval i tusindedele sekund
var intervals=2500

// Hvilken url skal brugeren sendes videre til efter introen
var targetdestination="../index.htm"

// Her skriver du dine tekster eller indsætter billeder
// Det er muligt at bruge html koder i teksterne
var splashmessage=new Array()
splashmessage[0]='Første tekst'
splashmessage[1]='Mere tekst'
splashmessage[2]=preloadimages[0] //Eks indsat billede
splashmessage[3]='tekst og billede ' + preloadimages[1]  // tekst og billede i samme meddelelse

// Definer udseende på teksten
var font='arial'
var size='6'
var color='#ff0000'

// Definer udseende på linken "skip intro"
var linkfont='arial'
var linksize='2'
var linkcolor='#ffffff'
var linktekst="skip intro"


// Du skal IKKE ændre noget efter denne linie //
////////////////////////////////////////////////

var openingtags='<font face="' + font + '"; size="' + size + '"; color="' + color + '">'
var closingtags='</font>'
var linkopeningtags='<font face="' + linkfont + '"; size="' + linksize + '"; color="' + linkcolor + '">'
var i=0

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0
//http://www.a-begynder.dk
var theimages=new Array()

//preload images
if (document.images){
for (p=0;p<preloadimages.length;p++){
theimages[p]=new Image()
theimages[p].src=preloadimages[p]
}
}

function displaysplash(){
if (i<splashmessage.length){
sc_cross.style.visibility="hidden"
sc_cross.innerHTML='<b><center>'+openingtags+ splashmessage[i]+closingtags+'</center></b>'
sc_cross.style.left=ns6?parseInt(window.pageXOffset) +parseInt(window.innerWidth)/2-parseInt(sc_cross.style.width)/2 : document.body.scrollLeft+document.body.clientWidth/2-parseInt(sc_cross.style.width)/2
sc_cross.style.top=ns6?parseInt(window.pageYOffset) +parseInt(window.innerHeight)/2-sc_cross.offsetHeight/2 : document.body.scrollTop+document.body.clientHeight/2-sc_cross.offsetHeight/2
sc_cross.style.visibility="visible"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash()",intervals)
}

function displaysplash_ns(){
if (i<splashmessage.length){
sc_ns.visibility="hide"
sc_ns.document.write('<b>'+openingtags+ splashmessage[i]+closingtags+'</b>')
//http://www.a-begynder.dk
sc_ns.document.close()

sc_ns.left=pageXOffset+window.innerWidth/2-sc_ns.document.width/2
sc_ns.top=pageYOffset+window.innerHeight/2-sc_ns.document.height/2

sc_ns.visibility="show"
i++
}
else{
window.location=targetdestination
return
}
setTimeout("displaysplash_ns()",intervals)
}



function positionsplashcontainer(){
if (ie4||ns6){
sc_cross=ns6?document.getElementById("splashcontainer"): document.all.splashcontainer
displaysplash()
}
else if (ns4){
sc_ns=document.splashcontainerns
sc_ns.visibility="show"
displaysplash_ns()
}
else
window.location=targetdestination
}
window.onload=positionsplashcontainer

// javascript slutter her -->
</script>

<div align="right">
<table border="0" width="200" height="100%" cellspacing="0" cellpadding="0">
<td width="100%" valign="bottom" align="right">

<script language=javascript>
<!-- javascript start
document.write('<a style="text-decoration: none" href="' + targetdestination + '">' + linkopeningtags + '[ ' + linktekst+ ' ]</font></a>')
// javascript slutter her -->
</script>

</td>
</table>
</div>


</body>
</html>

Eksempel >>

 

 

Uddybende forklaring:

I hovedtræk består koden af følgende elementer:

1. Den sorte skrift er almindelig html kode, som er på alle websider.

2. I selve body-taget indsættes koden bgcolor="#000000". Her definerer du baggrundsfarven i hexakode.

3. Herefter kommer en <div> og <layer> - markeret med grøn skrift. Her kan du definere bredden på beskederne.

4. Så kommer selve javascriptet - markeret med blåt. Vi giver lidt yderligere forklaring til javascriptet om lidt.

5. Afslutningsvis kommer der noget html-kode med endnu et lille javascript. Det er det sidste grønne tekst som omgiver en blå script-kode. Denne kode indsætter linken til at skippe introen nederst i højre side ... uanset vinduets størrelse.


Ad 4
I selve javascriptet er der en række værdier, som du selv kan/skal definere.

Først skal du angive url til billeder du evt. skal bruge. Hvis du ikke vil bruge billeder skal du slette linierne, så der kun står således:
var preloadimages=new Array()

Herefter angives tiden til hver tekst i tusindedele sekund, samt url på den side, som den besøgende skal sendes videre til efter introen.

Så kommer den del, hvor selve introen laves. Her kan du enten skrive tekster eller indsætte billeder ... eller kombinere dem.
- Tekster skal omgives med apostrof - fx 'din tekst'.
- Billeder indsættes ved at referere til de tidligere preloadimages[x].
- Tekster og billeder kan kombineres ved at forbinde med +.
- Du kan lave så mange beskeder, du vil. Bare følg samme struktur.

Afslutningsvis defineres fonten til selve teksten og linken til at skippe introen. Du kan også selv lave en anden tekst i stedet for "skip intro".

 

Forvirret?

Det behøver du ikke at blive. Faktisk kan det gøres meget let. Du kan bare kopiere hele koden og indsætte den på din side i stedet for den nuværende html-kode. Herefter kan du prøve at lege lidt med at ændre på værdierne markeret med rødt.

 

Bemærk:

Hvis du anvender css på siden, vil baggrundsfarve og linkens udseende følge dit stylesheet og ikke de definerede værdier i denne kode.

 

 

hmmmm ....
@-begynder

 

Til toppen >>

powered by FreeFind
hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering
hjemmesider webdesign frontpage grafik scripts asp html css tutorial begynder hjemmeside homepage programmering

Annoncer her ...!