tips tricks scripts script scripting funktioner søgemaskiner webhoteller layout webdesign server optimering html hjemmesider programmering web ftp

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
tips tricks scripts script scripting funktioner søgemaskiner webhoteller layout webdesign server optimering html hjemmesider programmering web ftp
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

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

Tekst- og linkskifter

Et lille script der genererer en tekstboks med tekster og eller links, som skifter efter et defineret tidsrum.

Det særlige ved denne version er, at brugeren har mulighed for at udvide vinduet og dermed se alle tekster samtidig.

Scriptet kan opsættes med så mange links, du ønsker. Og der er rigtig mange indstillingsmuligheder.

Javascript

Eksempel >>

 

Sådan gør du:

Scriptet består af to dele ... en style, som indsættes i din head sektion og selve scriptet, som indsættes der på siden, hvor linkskifteren skal sidde.

 

Trin 1

Indsæt denne style i din <head> sektion:

<style>
<!--

#listbutton{
         border:1px solid #4B4B4B;
         background-color:#F3F3F3;
         width:50px;
         height:17px;
         font: normal 11px Arial;
         color: black;
         text-align:center;
         cursor:pointer;cursor:hand }

.expandhighlight, .expandhighlight a{
color:silver }

#boks1 { position: absolute;
         z-index: 2 }

-->
</style>

Der er en række instillingsmuligheder i denne style - vi har markeret dem med rødt. Det meste er selvforklarende. 

De første instillingsmuligheder er for knappen til "se alle" og den sidste er farven på den aktive tekst, når menuen er udvidet. Denne er pt. angivet til "silver".

Det er i html muligt at angive farver som fx her over silver og black ... eller de fleste andre gængse farver. Du kan dog også vælge at erstatte disse med hexaværdier.

 

 

Trin 2

Indsæt dette script i din html kode, der hvor du vil have din linkskifter:

<script LANGUAGE="JavaScript1.2">
<!-- 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 dine beskeder - tilføj flere efter behov
// Du kan godt bruge html-kode til fx at indsætte links
var tickercontents=new Array()
tickercontents[0]='Tekst 1'
tickercontents[1]='<a href="mitlink.htm">linktekst</a>'
tickercontents[2]='<i>Tekst 2 skrevet med kursiv</i>'

// Definer bredde og baggrundsfarve
var tickerwidth='400px'
var tickerbgcolor='#DDDDFF'

// Definer tid til hver besked i tusindedele sekund
var tickdelay=4000

// Skal absolut placering anvendes? (ja/nej)
var absolut="ja"


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

if (absolut=='ja') {
var start='<div id="boks1">'
var slut='</div>'
}
else {
var start=''
var slut=''
}

var ie4=document.all
var ns6=document.getElementById
//http://www.a-begynder.dk
var ns4=document.layers

var currentmessage=0
var tickercontentstotal=''

function changetickercontent(){
if (ns4){
tickerobj.document.tickernssub.document.write('<b><a href="#" onClick="return expandlist(event)">Expand</a></b> | '+tickercontents[currentmessage])
tickerobj.document.tickernssub.document.close()
}
else if (ie4||ns6){
tickerobj.innerHTML=tickercontents[currentmessage]
previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) : eval("expand"+currentmessage)
tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval("expand"+previousmessage)
tickerexpand_previousitem.className=""
tickerexpand_item.className="expandhighlight"
}

currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1
setTimeout("changetickercontent()",tickdelay)
}

function start_ticking(){
if (ns4) document.tickernsmain.visibility="show"
tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4? document.tickernsmain : ""
tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand") : ns4? document.expandlayer : ""

for (i=0;i<tickercontents.length;i++) //get total scroller contents
tickercontentstotal+='<div id="expand'+i+'">- '+tickercontents[i]+'</div>'
if (ie4||ns6)
tickerexpandobj.innerHTML=tickercontentstotal
else{
tickerexpandobj.document.write(tickercontentstotal)
tickerexpandobj.document.close()
}
changetickercontent()
}

function expandlist(e){
if (ie4||ns6){
tickerexpand_parent=ie4? tickerexpand.parentElement : document.getElementById("tickerexpand").parentNode
tickerexpand_parent.style.display= (tickerexpand_parent.style.display=="none")? "" : "none"
}
else{
document.expandlayer.left=e.pageX-e.layerX
//http://www.a-begynder.dk
document.expandlayer.top= e.pageY-e.layerY+20
document.expandlayer.visibility= (document.expandlayer.visibility=="hide")? "show" : "hide"
return false
}
}

if (ie4||ns6)
document.write(start + '<table border="0" style="width:'+tickerwidth+';border:1px solid black;text-indent:2px" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td width="*" id="tickerlist" bgcolor="'+tickerbgcolor+'"></td><td width="20" bgcolor="'+tickerbgcolor+'"><div id="listbutton" onClick="expandlist()">Se alle</div></td><td width="1px" bgcolor="'+tickerbgcolor+'"></td></tr><tr style="display:none"><td id="tickerexpand" width="90%" bgcolor="'+tickerbgcolor+'"> </td><td width="10%"></td></tr></table>' + slut)

window.onload=start_ticking
// javascript slutter her -->
</script>

<ilayer id="tickernsmain" width=&{tickerwidth}; bgColor=&{tickerbgcolor}; visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer></ilayer>
<layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide></layer>

Definer selv værdierne angivet med rødt.

Du kan tilføje og slette tekstbeskedder efter behov.

Bemærk at du har mulighed for at vælge absolut placering eller ej. Hvis du vælger "ja", vil scriptet bruge stylen "boks1" til tekstboksen. Umiddelbart medfører dette ikke en "ægte" absolut placering, men blot at vinduet ikke vil skubbe efterfølgende html, når der trykkes på "se alle". Vær opmærksom på at scriptet i denne form skal indsættes på en tom linie. Evt. tekst på samme linie vil blive overskrevet.

Hvis du vælger "nej" til absolut placering, vil indhold under teksterne blive "skubbet", hvis vinduet udvides ... prøv dig lidt frem.

 

 

Det færdige html dokument <html>

<head>
<style>
<!--

#listbutton{
         border:1px solid #4B4B4B;
         background-color:#F3F3F3;
         width:50px;
         height:17px;
         font: normal 11px Arial;
         color: black;
         text-align:center;
         cursor:pointer;cursor:hand }

.expandhighlight, .expandhighlight a{
color:silver }

#boks1 { position: absolute;
         z-index: 2 }

-->
</style>
</head>

<body>
<script LANGUAGE="JavaScript1.2">
<!-- 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 dine beskeder
// Du kan godt bruge html-kode til fx at indsætte links
var tickercontents=new Array()
tickercontents[0]='Tekst 1'
tickercontents[1]='<a href="mitlink.htm">linktekst</a>'
tickercontents[2]='<i>Tekst 2 skrevet med kursiv</i>'

// Definer bredde og baggrundsfarve
var tickerwidth='400px'
var tickerbgcolor='#DDDDFF'

// Definer tid til hver besked i tusindedele sekund
var tickdelay=4000

// Skal absolut placering anvendes? (ja/nej)
var absolut="ja"


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

if (absolut=='ja') {
var start='<div id="boks1">'
var slut='</div>'
}
else {
var start=''
var slut=''
}

var ie4=document.all
var ns6=document.getElementById
//http://www.a-begynder.dk
var ns4=document.layers

var currentmessage=0
var tickercontentstotal=''

function changetickercontent(){
if (ns4){
tickerobj.document.tickernssub.document.write('<b><a href="#" onClick="return expandlist(event)">Expand</a></b> | '+tickercontents[currentmessage])
tickerobj.document.tickernssub.document.close()
}
else if (ie4||ns6){
tickerobj.innerHTML=tickercontents[currentmessage]
previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) : eval("expand"+currentmessage)
tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage) : eval("expand"+previousmessage)
tickerexpand_previousitem.className=""
tickerexpand_item.className="expandhighlight"
}

currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1
setTimeout("changetickercontent()",tickdelay)
}

function start_ticking(){
if (ns4) document.tickernsmain.visibility="show"
tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4? document.tickernsmain : ""
tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand") : ns4? document.expandlayer : ""

for (i=0;i<tickercontents.length;i++) //get total scroller contents
tickercontentstotal+='<div id="expand'+i+'">- '+tickercontents[i]+'</div>'
if (ie4||ns6)
tickerexpandobj.innerHTML=tickercontentstotal
else{
tickerexpandobj.document.write(tickercontentstotal)
tickerexpandobj.document.close()
}
changetickercontent()
}

function expandlist(e){
if (ie4||ns6){
tickerexpand_parent=ie4? tickerexpand.parentElement : document.getElementById("tickerexpand").parentNode
tickerexpand_parent.style.display= (tickerexpand_parent.style.display=="none")? "" : "none"
}
else{
document.expandlayer.left=e.pageX-e.layerX
//http://www.a-begynder.dk
document.expandlayer.top= e.pageY-e.layerY+20
document.expandlayer.visibility= (document.expandlayer.visibility=="hide")? "show" : "hide"
return false
}
}

if (ie4||ns6)
document.write(start + '<table border="0" style="width:'+tickerwidth+';border:1px solid black;text-indent:2px" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td width="*" id="tickerlist" bgcolor="'+tickerbgcolor+'"></td><td width="20" bgcolor="'+tickerbgcolor+'"><div id="listbutton" onClick="expandlist()">Se alle</div></td><td width="1px" bgcolor="'+tickerbgcolor+'"></td></tr><tr style="display:none"><td id="tickerexpand" width="90%" bgcolor="'+tickerbgcolor+'"> </td><td width="10%"></td></tr></table>' + slut)

window.onload=start_ticking
// javascript slutter her -->
</script>
<ilayer id="tickernsmain" width=&{tickerwidth}; bgColor=&{tickerbgcolor}; visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer></ilayer>
<layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide></layer>
</body>

</html>

Eksempel >>
 

 

Bemærk:

Selve teksten og links mv. vil tage tage style som defineret i dit stylesheet/css ... eller alternativt anvende standarder for www.

 

Hint:

Hvis du vælger absolut placering, har du mulighed for selv at definere den præcise placering af linkskifteren (absolut placering). Det gør du ved at tilføje disse to linier i stylen "boks1" i din head sektion:

left: XXpx;
top: YYpx;

Hvor XX angiver afstand fra venstre side af skærmen og YY afstanden fra toppen.

Den style (css kode) der skal indsættes i din head, skal altså se således ud, hvis du selv vil kunne definere den absolutte placering:

<style>
<!--

#listbutton{
         border:1px solid #4B4B4B;
         background-color:#F3F3F3;
         width:50px;
         height:12px;
         font: normal 11px Arial;
         text-align:center;
         cursor:pointer;cursor:hand }

.expandhighlight, .expandhighlight a{
color:red;
}

#boks1 { position: absolute;
         left: XXpx;
         top: YYpx;
         z-index: 2 }

-->
</style>

 

 

Til toppen >>
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

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 ...!

 
tips tricks scripts script scripting funktioner søgemaskiner webhoteller layout webdesign server optimering html hjemmesider programmering web ftp

tips tricks scripts script scripting funktioner søgemaskiner webhoteller layout webdesign server optimering html hjemmesider programmering web ftp