Hvor deler jeg

[Anna]

Jeg har med held fået lavet en dropdown- menu men nu har jeg fundet dette script på nettet og det virker også fint på min hjemmeside hvis jeg sætter hele scriptet in i html-filen men jeg vil gerne havde delt det op så jeg har i en javascript-fil så jeg bare linker til filen i min htlm-fil.
<script type="text/javascript">

var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["grafik/x7.jpg", "", ""] //plain image syntax
fadeimages[1]=["grafik/x9.jpg", "", ""] //plain image syntax
fadeimages[2]=["grafik/x10.jpg", "", ""] //plain image syntax
fadeimages[3]=["grafik/x1.jpg", "", ""] //plain image syntax
fadeimages[4]=["grafik/x2.jpg", "", ""] //plain image syntax
fadeimages[5]=["grafik/x3.jpg", "", ""] //plain image syntax
fadeimages[6]=["grafik/x4.jpg", "", ""] //plain image syntax
fadeimages[7]=["grafik/x6.jpg", "", ""] //plain image syntax
fadeimages[8]=["grafik/x8.jpg", "", ""] //plain image syntax
fadeimages[9]=["grafik/x5.jpg", "", ""] //plain image syntax
fadeimages[5]=["grafik/x3.jpg", "", ""] //plain image syntax
fadeimages[6]=["grafik/x4.jpg", "", ""] //plain image syntax
fadeimages[7]=["grafik/x6.jpg", "", ""] //plain image syntax
fadeimages[8]=["grafik/x8.jpg", "", ""] //plain image syntax
fadeimages[9]=["grafik/x5.jpg", "", ""] //plain image syntax
fadeimages[10]=["grafik/x11.jpg", "", ""] //plain image syntax
fadeimages[11]=["grafik/x12.jpg", "", ""] //plain image syntax
fadeimages[12]=["grafik/x13.jpg", "", ""] //plain image syntax
fadeimages[13]=["grafik/x14.jpg", "", ""] //plain image syntax
fadeimages[14]=["grafik/x15.jpg", "", ""] //plain image syntax
fadeimages[15]=["grafik/x16.jpg", "", ""] //plain image syntax
fadeimages[16]=["grafik/x17.jpg", "", ""] //plain image syntax
fadeimages[17]=["grafik/x18.jpg", "", ""] //plain image syntax
fadeimages[18]=["grafik/x11.jpg", "", ""] //plain image syntax
fadeimages[19]=["grafik/x19.jpg", "", ""] //plain image syntax
fadeimages[20]=["grafik/x20.jpg", "", ""] //plain image syntax
fadeimages[21]=["grafik/x21.jpg", "", ""] //plain image syntax
fadeimages[22]=["grafik/x22.jpg", "", ""] //plain image syntax
fadeimages[23]=["grafik/x23.jpg", "", ""] //plain image syntax
fadeimages[24]=["grafik/x24.jpg", "", ""] //plain image syntax
fadeimages[24]=["grafik/x25.jpg", "", ""] //plain image syntax
fadeimages[25]=["grafik/x26.jpg", "", ""] //plain image syntax
fadeimages[26]=["grafik/x27.jpg", "", ""] //plain image syntax
fadeimages[27]=["grafik/x28.jpg", "", ""] //plain image syntax
fadeimages[28]=["grafik/x11.jpg", "", ""] //plain image syntax
fadeimages[29]=["grafik/x29.jpg", "", ""] //plain image syntax
fadeimages[26]=["grafik/x30.jpg", "", ""] //plain image syntax



var fadebgcolor="white"

////NO need to edit beyond here/////////////

var fadearray=new Array() //array to cache fadeshow instances
var fadeclear=new Array() //array to cache corresponding clearinterval pointers

var dom=(document.getElementById) //modern dom browsers
var iebrowser=document.all

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]
}

var fadewidth=fadewidth+this.imageborder*2
var fadeheight=fadeheight+this.imageborder*2

if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;-khtml-opacity:10;background-color:'+fadebgcolor+'"></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DXImageTransform.Microsoft.alpha(opacity=10);-moz-opacity:10;background-color:'+fadebgcolor+'"></div></div>')
else
document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
this.startit()
else{
this.curimageindex++
setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
}
}

function fadepic(obj){
if (obj.degree<100){
obj.degree+=10
if (obj.tempobj.filters&&obj.tempobj.filters[0]){
if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
obj.tempobj.filters[0].opacity=obj.degree
else //else if IE5.5-
obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
}
else if (obj.tempobj.style.MozOpacity)
obj.tempobj.style.MozOpacity=obj.degree/101
else if (obj.tempobj.style.KhtmlOpacity)
obj.tempobj.style.KhtmlOpacity=obj.degree/100
}
else{
clearInterval(fadeclear[obj.slideshowid])
obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
obj.populateslide(obj.tempobj, obj.nextimageindex)
obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0
setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)
}
}

fadeshow.prototype.populateslide=function(picobj, picindex){
var slideHTML=""
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML='<a href="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
slideHTML+='<img src="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px">'
if (this.theimages[picindex][1]!="") //if associated link exists for image
slideHTML+='</a>'
picobj.innerHTML=slideHTML
}


fadeshow.prototype.rotateimage=function(){
if (this.pausecheck==1) //if pause onMouseover enabled, cache object
var cacheobj=this
if (this.mouseovercheck==1)
setTimeout(function(){cacheobj.rotateimage()}, 100)
else if (iebrowser&&dom||dom){
this.resetit()
var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
}
else{
var ns4imgobj=document.images['defaultslide'+this.slideshowid]
ns4imgobj.src=this.postimages[this.curimageindex].src
}
this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0
}

fadeshow.prototype.resetit=function(){
this.degree=10
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
if (crossobj.filters&&crossobj.filters[0]){
if (typeof crossobj.filters[0].opacity=="number") //if IE6+
crossobj.filters(0).opacity=this.degree
else //else if IE5.5-
crossobj.style.filter="alpha(opacity="+this.degree+")"
}
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=this.degree/101
else if (crossobj.style.KhtmlOpacity)
crossobj.style.KhtmlOpacity=obj.degree/100
}


fadeshow.prototype.startit=function(){
var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
this.populateslide(crossobj, this.curimageindex)
if (this.pausecheck==1){ //IF SLIDESHOW SHOULD PAUSE ONMOUSEOVER
var cacheobj=this
var crossobjcontainer=iebrowser? iebrowser["master"+this.slideshowid] : document.getElementById("master"+this.slideshowid)
crossobjcontainer.onmouseover=function(){cacheobj.mouseovercheck=1}
crossobjcontainer.onmouseout=function(){cacheobj.mouseovercheck=0}
}



this.rotateimage()
}

</script>

<!-- Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/ -->

<body topmargin="0" leftmargin="0" bgcolor="#ffffff" link="#66FF66" vlink="#66FF66">

<div align="center">
<center>

<table border="0" width="100" height="100" cellspacing="0" cellpadding="0" bordercolorlight="#009933" bordercolor="#009933" bordercolordark="#009933">
<tr>
<td width="100%" valign="middle" align="center" height="100">
<table border="0" width="990" height="90" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td width="1000" height="90" valign="middle" align="center" bgcolor="#ffffff"><b><font face="Verdana" color="#ffffff"><br>

<td width="1000" height="90" bgcolor="#ffffff">
<font color="#ffffff"><b>
<script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, "R")


</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#ffffff"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")



</script></b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#ffffff"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")


</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")

</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")
</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")

</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")
</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")

</script>
</b></font></td>
<td width="600" height="100" bgcolor="#ffffff" valign="middle" align="center"><b><font face="Verdana" color="#003300"<br>

<td width="600" height="100" bgcolor="#ffffff"><script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 100, 100, 0, 6000, 1, "R")



</script>

[scootergrisen]

I din HTML kode i <head> delen skriver du :

Kode: Vælg alt

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

Også flytte du alt det du lige har skrevet over i en fil du kalder javascript.js.

Også sletter du <script type="text/javascript"> og </script>.

[Anna]

Tak for dit svar men jeg kunne ikke få det til at lykkes. Billederne skal først indsættes under min menu.

[ThomasI]

Problemet er at scriptet er en blanding af HTML og Javascript. Det betyder at du ikke kan kører det via et eksternt js dokument, da der også er html der skal vises på siden.

Du kan evt gøre det at du gemmer det hele i et php dokument og inkudere det de steder du skal bruge det. det vil give den samme funktionalitet som hvis du indkulderede via <script>. Der skulle gerne være et video her på sitet under php der viser hvordan du laver sådan en indclude.

[Anna]

Tak for svaret. Jeg vil prøve at kigge på PHP. Tak også for rigtige gode video.

[scootergrisen]

Måske skulle du bare finde noget andet kode at bruge det virker som gammel kode du har fundet der.

[Anna]

Det har du ret i men det virker på min hjemmeside, Bare ikke helt som jeg gerne vil. Billederne skifter ikke så meget som jeg kunne ønske. Jeg skal lige lidt mere ind javascript inden jeg tør lave det om. Du kan se det på min hjemmeside www.dagliljebakken.dk. Men jeg er ved at lave en helt ny hjemmeside med dropdown-menu og flere sjove ting. Men det tager tid. Men nem programmering er til god hjælp.

[ThomasI]

har du et link til det sted du har fundet denne menu? - så kan vi måske finde en tilsvarende der er mere "nutidig" og simpel til dig

[scootergrisen]

Du kan eventuelt bruge denne dropdown menu som jeg selv bruger :
http://scootergrisen.dk/htmlgrisen/css_menu.php

[Anna]

Det er ikke min dropdown jeg har problemer med. Den er ok men er ikke lagt på min hjemmeside fordi der er en del mere jeg vi have lavet om inden. Med dropmenuen kan jeg undgå den menu i siden. Det gør at siderne jeg har skal laves om til at fylde hele siden. Det er de billeder jeg har under menuen der skifter. Jeg har fundet det på www.sparkaer.dk. Så har jeg lavet en del om på det. Jeg har billeder nok men sommetider er der tre ens på samme tid. Jeg ville gerne at det var hele tiden var forskellige billeder.

[scootergrisen]

Hvis jeg i Firefox klikker på et af dine links i menuen så åbner linket i en nyt tab/vindue.

Også flyt din CSS kode til en fil for så selv.

Så for eksempel ret :

Kode: Vælg alt

<head>
<title>Index</title>
</head>
<style>
a.menu{
font-family:verdana;
color:#000000;
text-decoration:none;

}
a.menu:hover{
color:#993300;
}
a.menu2{
font-family:verdana;
color:#000000;
text-decoration:none;
font-size:12px;
}
h1{
font-family:verdana;
color:#000000;
font-size:40px;
}


</style>

Til :

Kode: Vælg alt

<head>
<title>Index</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>

Og put din CSS kode i en fil du kalder stylesheet.css :

Kode: Vælg alt

<style>
a.menu{
font-family:verdana;
color:#000000;
text-decoration:none;

}
a.menu:hover{
color:#993300;
}
a.menu2{
font-family:verdana;
color:#000000;
text-decoration:none;
font-size:12px;
}
h1{
font-family:verdana;
color:#000000;
font-size:40px;
}


</style>

På din måde har du din CSS kode i én fil også når du skal rette udseendet så skal du kun rette et sted.

Også vælg en bedre titel end Index.
For eksempel Dagliljebakken.

[ThomasI]

Jeg fandt lige det her som løser mange af dine problemer:

http://css3.bradshawenterprises.com/cfimg/

For det første er dette MEGET mere simpelt end den kæmpe kode du har fundet... Det er en Jquery funktion på 3 linjer der får det hele til at virke ( jQuery er verdensklasse!! ) - alt hvad du behøver udover den er en smule HTML og lidt CSS - det hele kan kopieres fra artiklen.

Du kunne f.eks vælge den med billedeskift hvert 9. sekund. Hvis du bruger denne kode, kan du blot bytte om på billede rækkefølgen i html´en til de 4 forskellige steder du vil have den, og på den måde vil de starte på 4 forskellige billeder og skifte forskelligt.

[Anna]

Tak for svarene begge to. Jeg vil prøve om jeg kan finde ud af at lave det lidt nemmere men det er mange billeder der skal skifte. Det med at der står index i stedet for dagliljebakken havde jeg ikke set men det vil blive ændret når jeg lægger min nye hjemmeside op. Skal bare lige være færdig med den men jeg finder hele tiden noget nyt jeg vil have på.

[Anna]

Svar til scootergrisen. Grunden til at mine link i menuen åbner et nyt vindue er at den dropdown-menu jeg har lavet slet ikke er lagt op endnu. Alle mine sider skal jo tilpasses fordi breden bliver større når jeg fjerner menuen i venstre side. Desuden er der også flere andre ting der skal laves om.