javacript in document

[jeel2008]

hallo

onderstaande javascript wil ik eigenlijk uit de pagina halen en los in een bestand zetten en er dan naar verwijzen als het te pas komt. het is een slider van plaatjes. (wel oud zo te zien, want ik zie iets met netscape, maar dat doet er nu niet toe).
ik weet hoe je een verwijzing maakt naar een jsbestand in de header, maar...hoe roep ik het nu op in mn pagina zelf?
voorbeeld:
header : hier staat de verwijzing naar het script
body: tekst tekst tekst en hier heb ik het script nodig. hoe maak ik dat duidelijk?
footer: einde

var breedte=300
var hoogte=105
var snelheid=2
agrondkleur="#FFFFFF"
//Invoegen van de afbeeldingen met eventuele hyperlinks:
var afbeelding=new Array()
afbeelding[0]='<a href="http://www.snellopers.nl" target=_new"><img src="1.gif" width=150 height=100 border=0></a>'
afbeelding[1]='<a href="http://www.digihosting.nl" target=_new"><img src="2.gif" width=150 height=100 border=0></a>'
afbeelding[2]='<a href="http://www.snellopers.nl" target=_new"><img src="3.gif" width=150 height=100 border=0></a>'
afbeelding[3]='<a href="http://www.digihosting.nl" target=_new"><img src="4.gif" width=150 height=100 border=0></a>'
afbeelding[4]='<a href="http://www.snellopers.nl" target=_new"><img src="5.gif" width=150 height=100 border=0></a>'

//Hieronder niets meer wijzigen
var kopieersnelheid=snelheid
afbeelding='<nobr>'+afbeelding.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+afbeelding+'</span>')
var huidige_breedte=''

function opvullen(){
if (iedom){
afb=document.getElementById? document.getElementById("test2") : document.all.test2
afb2=document.getElementById? document.getElementById("test3") : document.all.test3
afb.innerHTML=afb2.innerHTML=afbeelding
huidige_breedte=document.all? afb.offsetWidth : document.getElementById("temp").offsetWidth
afb2.style.left=huidige_breedte+4
}
else if (document.layers){
ns_slide=document.netscape.document.netscape2
ns_slide2=document.netscape.document.netscape3
ns_slide.document.write(afbeelding)
ns_slide.document.close()
huidige_breedte=ns_slide.document.width
ns_slide2.left=huidige_breedte+4
ns_slide2.document.write(afbeelding)
ns_slide2.document.close()
}
lefttime=setInterval("schuiflinks()",30)
}
window.onload=opvullen

function schuiflinks(){
if (iedom){
if (parseInt(afb.style.left)>(huidige_breedte*(-1)+8))
afb.style.left=parseInt(afb.style.left)-kopieersnelheid
else
afb.style.left=parseInt(afb2.style.left)+huidige_breedte+4

if (parseInt(afb2.style.left)>(huidige_breedte*(-1)+8))
afb2.style.left=parseInt(afb2.style.left)-kopieersnelheid
else
afb2.style.left=parseInt(afb.style.left)+huidige_breedte+4

}
else if (document.layers){
if (ns_slide.left>(huidige_breedte*(-1)+8))
ns_slide.left-=kopieersnelheid
else
ns_slide.left=ns_slide2.left+huidige_breedte+4

if (ns_slide2.left>(huidige_breedte*(-1)+8))
ns_slide2.left-=kopieersnelheid
else
ns_slide2.left=ns_slide.left+huidige_breedte+4
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+breedte+';height:'+hoogte+';overflow:hidden">')
write('<div style="position:absolute;width:'+breedte+';height:'+hoogte+';background-color:'+agrondkleur+'" onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+breedte+' height='+hoogte+' name="netscape" bgColor='+agrondkleur+'>')
write('<layer name="netscape2" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('<layer name="netscape3" left=0 top=0 onMouseover="kopieersnelheid=0" onMouseout="kopieersnelheid=snelheid"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}

 

[visha]

dit is een voorbeeld hoe je het include.

[JS]<script type="text/javascript" src="file.js" />[/JS]

en hoe je dit gebruikt doe je door een functie aan te roepen in de file.js

Byess VRC

 

[jeel2008]

js

bedankt, maar iets uitgebreider mag wel.
dat laatste, die functie aanroepen, kun je in het geval waar we het over hebben een voorbeeld geven hoe je dat aanpakt? want dat is eigenlijk nu precies net de vraag.

 

[That Guy]

Een los javascript bestand moet je eigenlijk zo zien: in de HTML-pagina roep je het aan via het script-tag. De js-file wordt dan geopent en neergezet op de plek van de script-tag.

Het enige wat het dus doet is je code netter maken.

Stel, je hebt deze code in testbestand.js staan:[JS]function test()
{
alert('functie test hier!');
}[/JS]en dit is een deel van je HTML pagina:

<!-- html hier -->

<script src='testbestand.js'></script>

<!-- eventueel html hier -->

<script>

   test();   // roep functie test aan. Deze staat in het testbestand.js

</script>

krijg je een mooie alert.

Je hoeft alleen je javascript in een extern bestand te zetten op de plek waar de code 'moet komen' neerzetten. Alle functie-aanroepen staan namelijk ook in het javascript-bestand.


Javascript in de <head> is, net zoals de code van je script, echt iets uit 1998.


:thumb:

 

[jeel2008]

js

aha, weer wat geleerd, bedankt.
nog enkele vragen:
1. js in de head is dus ouderwets?
2. hoe weet ik nu hoe die functie heet? ik zie wel function opvullen() staan; doet deze opdracht het filmpje lopen dan?
3. of is 'alert' de functie die een extern jsbestand in de html activeert, zal ik maar zeggen.

ik bedoel, ik snap wel wat je zegt, ('Je hoeft alleen je javascript in een extern bestand te zetten op de plek waar de code 'moet komen' neerzetten.') maar weet niet hoe ik zorg dat het filmpje gaat lopen. ik kan bv niet zeggen document.write , want er moet niks geschreven worden, er moet een filmpje worden afgespeeld.

 

[That Guy]

Nou, in je script staat (oa) dit:

[JS]window.onload=opvullen[/JS]

ofwel, als de pagina klaar is met laden, begin met de functie opvullen. opvullen() doet grofweg dit:[JS]function opvullen()
{
// doe stuff

setInterval("schuiflinks()", 30); // AKA. om de 30 ms. schuiflinks() aanroepen
}[/JS]De scuiflinks-functie animeert je plaatjes.

kortweg: je doet de code uit je 1e post in een .js bestand, en roept m aan op de plek waar je het wilt:

<!-- html hier. Op de plek waar je het wilt: -->

<script src='fotogeval.js'></script>

<!-- hier meer html -->

uitgaande dat je het bestand 'fotogeval.js' hebt genoemd, en deze in dezelfde map staat als je .html bestand.

Ohja, het is best practisch als je een online voorbeeld hebt! :thumb:




Over het 'ouderwets' gedeelte:

mijn deskundige (ha!) mening: dit script is oud, en _heel_ erg slecht. ilayer!? setTimeout met een string? with()! Netscape? Het verbaast me nogsteeds altijd dat dit soort scripts weet te overleven... in ieder geval, er zijn veel betere oplossingen, en die zullen waarschijnlijk niet voor problemen zorgen. CSS Hunter, een forum-lid, heeft ergens op zn site een mooi foto-rotatie script, maar ik weet niet precies waar. Zoek even t forum door anders! (rechtsboven staat een veld met 'Zoekterm'. Vul er iets in als, CSS javascript foto rotatie oid.)

[edit]gevonden: hier. Of gewoon zelf eens op verkenningstocht: hier.[/edit]

 

[jeel2008]

js

hello that guy,
ha, het is gelukt! geweldig, ben ik in ieder geval van die zutzooi af in mn header, ook beter voor de zoekmachines.
ja, csshunter heeft mooie dingen gemaakt, ik heb er al meer van gezien.
hoe dan ook, hartelijk dank, jeel2008

ps trouwens, nog 1 ding: overal kom in dit tegen in mn paginas:

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

</script>

ik dacht eerste dat het gerelateerd was aan de code hieronder (want dat is de code die ik net heb weggetoverd in een jsbestand), maar dat is niet zo, want toen ik het delete veranderde eigenlijk niks op de pagina. alles functioneerde nog. enig idee of dreamweaver zoiets aanmaakt, of waar het vandaan komt? kan me nl niet herinneren dat ik het er een keer heb ingeplakt.

// JavaScript Document


var afbeeldingen=new Array()

afbeeldingen[0]=["imagesvlinderkas/telpost/vlieger1.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[1]=["imagesvlinderkas/telpost/vlieger2.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[2]=["imagesvlinderkas/telpost/vlieger3.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[3]=["imagesvlinderkas/telpost/vlieger4.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[4]=["imagesvlinderkas/telpost/vlieger5.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[5]=["imagesvlinderkas/telpost/vlieger6.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[6]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_1.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[7]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_2.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[8]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_3.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[9]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_4.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[10]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_5.jpg"] // "naam van de foto", "hyperlink"

afbeeldingen[11]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_6.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[12]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_7.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[13]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_8.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[14]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_9.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[15]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_10.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[16]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_11.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[17]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_12.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[18]=["imagesvlinderkas/telpost/vlinderkas_bruidskamer_13.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[19]=["imagesvlinderkas/telpost/vlindermeer.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[20]=["imagesvlinderkas/telpost/lintvanooij_1.jpg"] // "naam van de foto", "hyperlink"
afbeeldingen[21]=["imagesvlinderkas/telpost/lintvanooij_2.jpg"] // "naam van de foto", "hyperlink"


var voorladen="nee" // ja of nee
var optlinktarget="_blank" // hier kun je de target invullen 
var beeldrandbreedte=0 // breedte rand voor plaatjes
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"




// hieronder niets meer  wijzigen

if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}

function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a hef="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'" style="border: 6px solid white;">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}

function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}

 

[jeel2008]

rollovers

ik denk dat ik het al weet, dat laatste van de preload-gedoe ( function MM_preloadImages() )
http://www.vlinderkas.com/
hier heb ik op de indexpag rollovers staan...blijkbaar meegenomen naar andere paginas...

 

[That Guy]

Yup, dat is rollover code. Ik snap nogsteeds niet waarom die code bestaat, het is ook niet echt nette code enzo. Helemaal voor rollover-plaatjes, want dat zou gewoon kunnen in 3 regels... maargoed.



:thumb: