Javascripts

Op deze pagina een aantal javascripts, die je kunt gebruiken voor je website.

• Datumscript
• Tijdscript
• Vallende sneeuw
• Quiz
• Slideshow, fotoalbum
• Vallende letters
• Verspringend plaatje
• Alertbox
• Een bewegende muisaanwijzer
• Sterrenwolk bij je muisaanwijzer
• Buienradar
• Weerstation
• Radio 3 op je site
• Gastenboek
• Op Anouk´s web vind je ook veel scripts

Datumscript

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
<!-- Begin van datumscript --> <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> <!-- function initArray() { this.length = initArray.arguments.length; for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i]; } var dagArray = new initArray("zondag","maandag", "dinsdag","woensdag","donderdag","vrijdag","zaterdag"); var maandArray = new initArray("januari","februari","maart","april","mei","juni","juli", "augustus","september","oktober","november","december"); var nu = new Date(); var dagtekst = dagArray[(nu.getDay()+1)]; var dag = nu.getDate(); var maandtekst = maandArray[(nu.getMonth()+1)]; var jaar = nu.getYear(); var jaar4 = ((jaar < 1900) ? (jaar + 1900) : (jaar)); var datumweergave = 'Het is vandaag ' + dagtekst + " " + dag + " " + maandtekst + " " + jaar4; document.write(datumweergave); //--> </script> <!-- Eind van datumscript -->

Terug naar boven

Tijdscript

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
<!-- Begin van Tijdscript --> <script language="JavaScript"><!-- // Beginning of JavaScript - var showtime=true var timer var i_sec=0 function clockon() { if (i_sec < 5) { thistime= new Date() var hours=thistime.getHours() var minutes=thistime.getMinutes() var seconds=thistime.getSeconds() if (eval(hours) <10) {hours="0"+hours} if (eval(minutes) < 10) {minutes="0"+minutes} if (seconds < 10) {seconds="0"+seconds} thistime = "----- "+hours+":"+minutes+":"+seconds+" -----" document.forms[0].elements[0].value=thistime i_sec++ timer=setTimeout("clockon()",1000) } else { clearTimeout(timer) i_sec=0 document.forms[0].elements[0].value="HOE LAAT ZOU HET ZIJN?" } } function clockoff() { clearTimeout(timer) document.forms[0].elements[0].value="HOE LAAT IS HET?" } // - End of JavaScript - // --></script> <form> <div align="center"><center><table border="0" cellpadding="7"> <tr> <td align="left"><p align="left"><input type="button" value="HOE LAAT IS HET?" onclick="clockon()" onmouseover="clockon()" onmouseout="clockoff()"> </p> </td> </tr> </table> </center></div> </form> <!-- Eind van tijdscript-->

Terug naar boven

Vallende sneeuw

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina.
Vervang in het sneeuwscript "image/sneeuw.GIF" door "mijnplaatjes/xxxxx.gif"
<!-- Begin van sneeuwscript --> <script language="JavaScript1.2"> <!-- This cool script is copyright Altan, visit his site! --> <!-- http://www.altan.hr/snow --> <!-- This script is provided free at Lissa Explains it All --> <!-- http://www.lissaexplains.com --> <!-- Begin var no = 15; // snow number var speed = 9; // smaller number moves the snow faster var snowflake = "image/sneeuw.GIF"; var ns4up = (document.layers) ? 1 : 0; // browser sniffer var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; // coordinate and position variables var am, stx, sty; // amplitude and step variables var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i < no; ++ i) { dx[i] = 0; // set coordinate variables xp[i] = Math.random()*(doc_width-50); // set position variables yp[i] = Math.random()*doc_height; am[i] = Math.random()*20; // set amplitude variables stx[i] = 0.02 + Math.random()/10; // set step variables sty[i] = 0.7 + Math.random(); // set step variables if (ns4up) { // set layers if (i == 0) { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } else { document.write("<layer name=\"dot"+ i +"\" left=\"15\" "); document.write("top=\"15\" visibility=\"show\"><img src=\""); document.write(snowflake + "\" border=\"0\"></layer>"); } } else if (ie4up) { if (i == 0) { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } else { document.write("<div id=\"dot"+ i +"\" style=\"POSITION: "); document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: "); document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\""); document.write(snowflake + "\" border=\"0\"></div>"); } } } function snowNS() { // Netscape main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = self.innerWidth; doc_height = self.innerHeight; } dx[i] += stx[i]; document.layers["dot"+i].top = yp[i]; document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowNS()", speed); } function snowIE() { // IE main animation function for (i = 0; i < no; ++ i) { // iterate for every dot yp[i] += sty[i]; if (yp[i] > doc_height-50) { xp[i] = Math.random()*(doc_width-am[i]-30); yp[i] = 0; stx[i] = 0.02 + Math.random()/10; sty[i] = 0.7 + Math.random(); doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx[i] += stx[i]; document.all["dot"+i].style.pixelTop = yp[i]; document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]); } setTimeout("snowIE()", speed); } if (ns4up) { snowNS(); } else if (ie4up) { snowIE(); } // End --> </SCRIPT> <!-- Eind van sneeuwscript -->

Terug naar boven

Quiz

Voorbeeld >>>
Zet de tekst uit dit vak tussen de head tags van je pagina
<!-- Begin van quiz-script--> <script language="JavaScript"> <!-- Verbergen function test1(form) { form.result.value= parseInt(form.D1.options[form.D1.selectedIndex].value)+ parseInt(form.D2.options[form.D2.selectedIndex].value)+ parseInt(form.D3.options[form.D3.selectedIndex].value)+ parseInt(form.D4.options[form.D4.selectedIndex].value)+ parseInt(form.D5.options[form.D5.selectedIndex].value)+ parseInt(form.D6.options[form.D6.selectedIndex].value); form.percentage.value= form.result.value / 6 * 100; } /* dus wil je meer vragen kopieer in functie test1 parseInt(form.D{nummer}.options[form.D{zelfdenummer}.selectedIndex].value), verander in / {aantal vragen} * 100 en kopieer hieronder het gedeelte tussen de ,select tags. Verander de naam in D{nummer hoger}. value="1" is natuurlijk het juiste antwoord.*/ // --> </script> <!--Einde van quiz-script-->

Zet de tekst uit het vak hieronder tussen de body tags van je pagina.
Verander de vragen over Technika 10 Keistad door eigen vragen. Vervang de antwoorden door eigen antwoorden.
De antwoorden staan tussen de tags <option> en </option> Telkens bij de tag <option value = "1"> zet je het goede antwoord,
bij <option value = "0"> zet je een fout antwoord.
Als je een beetje handig bent, kun je zelf meer vragen toevoegen.
Vergeet dan niet in bovenstaand script aantal vragen 6 te vervangen door het nieuwe aantal.
Succes!

<!-- Begin van het vragenformulier --> <p /><H1>Beantwoord de vragen</H1> <form action="" method="post"> <ul> <li> <p><b>1.In welk jaar is Stichting Technika 10 Keistad opgericht? </b><br> <select name="D1" style="width:400"> <option value="Error">Kies een antwoord</option> <option value="0">2003</option> <option value="0">2004</option> <option value="0">2005</option> <option value="1">2006</option> </select></li><br><br><br> <li> <p><b>2.In welke stad organiseert Technika 10 Keistad cursussen? </b><br> <select name="D2" style="width:400"> <option value="Error">Kies een antwoord</option> <option value="0">Utrecht</option> <option value="1">Amersfoort</option> <option value="0">Apeldoorn</option> <option value="0">Nijmegen</option> </select><br><br><br> </li> <li> <p><b>3.Wat leer je op de cursus Girltec?</b><br> <select name="D3" style="width:400"> <option value="Error">Kies een antwoord</option> <option value="1">Hout, metaal en andere materialen bewerken</option> <option value="0">Robotjes maken van technisch Lego</option> <option value="0">Kostuums ontwerpen en naaien</option> <option value="0">Computerspellen maken</option> </select><br><br><br> </li> <li> <p><b>4. Wie kunnen de cursussen volgen?</b><br> <select name="D4" style="width:400"> <option value="Error">Kies een antwoord</option> <option value="0">50-plussers</option> <option value="0">Kinderen uit de onderbouw basisschool</option> <option value="0">Jongens van 12-17 jaar</option> <option value="1">Meisjes van 8-15 jaar</option> </select><br><br><br> </li> <li> <p><b>5.Wat is Girslday?</b><br> <select name="D5" style="width:400"> <option value="Error">Kies een antwoord</option><br> <option value="0">Zo heet Moederdag in Canada</option> <option value="1">Dan kunnen meisjes technische bedrijven bezoeken</option> <option value="0">De open dag van Technika 10 Keistad</option> <option value="0">Een herdenkingsdag uit de eerste wereldoorlog</option> </select><br><br><br> </li> <li> <p><b>6.Wat vind je de leukste cursus?</b><br> <select name="D6" style="width:400"> <option value="Error">Kies een antwoord</option> <option value="1">Game Maker</option> <option value="1">Girltec</option> <option value="1">Websites</option> <option value="1">Pc-sleutelen</option> </select><br><br><br> <p /> </li> </ul> <p> <input type="button" name="button1" value="Wat is mijn score?" onClick="test1(this.form)" style="width:200"><br><br> Van de zes vragen heeft u er <input type="text" name="result" size="3"> goed beantwoord.<br><br> Dat is een percentage van <input type="text"name="percentage"size="2">% </p > <!-- Einde van het vragenformulier -->

Terug naar boven

Slideshow, fotoalbum

Voorbeeld >>>
Je maakt een fotoalbum voor 10 foto's.
Wil je niks aan de scripts hoeven te veranderen, zet dan de foto's in een map fotos.
Verander de namen van de foto's in foto (1).jpg, foto (2).jpg, foto (3).jpg etc. Let op maak geen typefouten.
De foto's worden nu getoond met een breedte van 350 pixels.
Controleer met paint hoe breed jouw foto's zijn.
Zijn ze breder, verklein ze dan tot een breedte van 350 pixels
Zijn ze smaller, pas dan in de tekst die je tussen de bodytags moet plaatsen width='350' aan.
Doe je dat niet, dan lijken foto's onscherp, zoals in het voorbeeld.

Zet de tekst uit dit vak tussen de head tags van je pagina
<!-- De waarde bij top en left bepaalt de plaats van de grote afbeelding --> <style type='text/css'> .plaatje { position:absolute; top:250; left:328; visibility:hidden; } </style> <script type="text/javascript"> browsertest=navigator.appName versietest=navigator.appVersion var version45=(versietest.indexOf("4.")!=-1||versietest.indexOf("5.")!=-1) var NS=(browsertest.indexOf("Netscape")!=-1 && version45) var IE=(browsertest.indexOf("Explorer")!=-1 && version45) if(!NS&&!IE)alert("Je hebt een browser nodig van het type 4 of hoger om deze toepassing te kunnen gebruiken.") if(IE){var hide="hidden"; var show="visible"} if(NS){var hide="hide"; var show="show"} </script> <script type="text/javascript"> <!-- Hier geef je elke afbeelding een ID-naam --> var AfbeeldingenArray = new Array() AfbeeldingenArray[0]='f1' AfbeeldingenArray[1]='f2' AfbeeldingenArray[2]='f3' AfbeeldingenArray[3]='f4' AfbeeldingenArray[4]='f5' AfbeeldingenArray[5]='f6' AfbeeldingenArray[6]='f7' AfbeeldingenArray[7]='f8' AfbeeldingenArray[8]='f9' AfbeeldingenArray[9]='f10' var AantalAfbeeldingen=AfbeeldingenArray.length function tonen(divId){ for(i=0;i<AantalAfbeeldingen;i++){ if(AfbeeldingenArray[i].indexOf(divId)==0){ if(IE)eval('document.all.'+divId+'.style.visibility=show'); if(NS)document.eval(divId).visibility=show; AfbeeldingenArray[i]=divId+"+1"; break}}} function verbergen(divId){ for(i=0;i<AantalAfbeeldingen;i++){ if(AfbeeldingenArray[i].indexOf(divId)==0){ if(IE)eval('document.all.'+divId+'.style.visibility=hide'); if(NS)document.eval(divId).visibility=hide; AfbeeldingenArray[i]=divId; break}}} function AllesVerbergen(){ for(i=0;i<AantalAfbeeldingen;i++){ if(AfbeeldingenArray[i].indexOf("+1")>0){ divId=AfbeeldingenArray[i].substr(0,AfbeeldingenArray[i].length-2); if(IE)eval('document.all.'+divId+'.style.visibility=hide'); if(NS)document.eval(divId).visibility=hide; AfbeeldingenArray[i]=divId; }}} function Toon(dezeAfbeelding){AllesVerbergen();tonen(dezeAfbeelding)} </script>

Zet de tekst uit dit vak tussen de body tags van je pagina
<table cellpadding="0" cellspacing="0" width="100%" height=100% align="center" bgcolor='#ffff00'> <tbody> <tr> <td > <div id="f1" class="plaatje"> <img src="fotos/foto (1).jpg" width='350'><br> <center>Deze tekst hoort bij foto1.</center> </div> <div id="f2" class="plaatje" > <img src="fotos/foto (2).jpg" width='350'><br> <center>Deze tekst hoort bij foto2.</center> </div> <div id="f3" class="plaatje"> <img src="fotos/foto (3).jpg" width='350'><br> <center>Een tekst bij foto 3.</center> </div> <div id="f4" class="plaatje"> <img src="fotos/foto (4).jpg" width='350'><br> <center>Uitleg bij foto 4.</center> </div> <div id="f5" class="plaatje"> <img src="fotos/foto (5).jpg" width='350'><br> <center>Deze tekst en uitleg hoort bij foto 5.</center> </div> <div id="f6" class="plaatje"> <img src="fotos/foto (6).jpg" width='350'><br> <center>Deze tekst hoort bij foto6.</center> </div> <div id="f7" class="plaatje"> <img src="fotos/foto (7).jpg" width='350'><br> <center>Een tekst bij foto 7.</center> </div> <div id="f8" class="plaatje"> <img src="fotos/foto (8).jpg" width='350'><br> <center>Uitleg bij foto 8.</center> </div> <div id="f9" class="plaatje"> <img src="fotos/foto (9).jpg" width='350'><br> <center>Deze tekst en uitleg hoort bij foto 9.</center> </div> <div id="f10" class="plaatje"> <img src="fotos/foto (10).jpg" width='350'><br> <center>Deze tekst hoort bij foto10.</center> </div> </td> </tr> <tr> <td width='100%' align='center' valign ='bottom' height='200'> <div> <center> <img src="fotos/foto (1).jpg" width= 40 height= 30 onMouseOver="Toon('f1')"> <img src="fotos/foto (2).jpg" width= 40 height= 30 onMouseOver="Toon('f2')"> <img src="fotos/foto (3).jpg" width= 40 height= 30 onMouseOver="Toon('f3')"> <img src="fotos/foto (4).jpg" width= 40 height= 30 onMouseOver="Toon('f4')"> <img src="fotos/foto (5).jpg" width= 40 height= 30 onMouseOver="Toon('f5')"> </center> <br /> <img src="fotos/foto (6).jpg" width= 40 height= 30 onMouseOver="Toon('f6')"> <img src="fotos/foto (7).jpg" width= 40 height= 30 onMouseOver="Toon('f7')"> <img src="fotos/foto (8).jpg" width= 40 height= 30 onMouseOver="Toon('f8')"> <img src="fotos/foto (9).jpg" width= 40 height= 30 onMouseOver="Toon('f9')"> <img src="fotos/foto (10).jpg" width= 40 height= 30 onMouseOver="Toon('f10')"> </div> </td> </tr> <tr> <td valign = 'top' align='center'>   <a href="javascript:history.back(-1)">Terug naar vorige pagina</a></td> </tr> </tbody> </table>

Terug naar boven

Vallende letters

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina.
Vervang bij gebruik van dit script de tag body door body onload="dynAnimation()"
Vervang in de regel helemaal onderin het script de letters t e k s t door eigen tekst.
Dit script werkt niet als je ook een bewegende muisaanwijzer hebt.
<!-- Begin van script Vallende letters--> <script language="JavaScript"> <!-- dynamicanimAttr = "dynamicanimation" animateElements = new Array() currentElement = 0 speed = 0 stepsZoom = 8 stepsWord = 8 stepsFly = 12 stepsSpiral = 16 steps = stepsZoom step = 0 outString = "" function dynAnimation() { var ms = navigator.appVersion.indexOf("MSIE") ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4) if(!ie4) { if((navigator.appName == "Netscape") && (parseInt(navigator.appVersion.substring(0, 1)) >= 4)) { for (index=document.layers.length-1; index >= 0; index--) { layer=document.layers[index] if (layer.left==10000) layer.left=0 } } return } for (index=document.all.length-1; index >= document.body.sourceIndex; index--) { el = document.all[index] animation = el.getAttribute(dynamicanimAttr, false) if(null != animation) { if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord") { ih = el.innerHTML outString = "" i1 = 0 iend = ih.length while(true) { i2 = startWord(ih, i1) if(i2 == -1) i2 = iend outWord(ih, i1, i2, false, "") if(i2 == iend) break i1 = i2 i2 = endWord(ih, i1) if(i2 == -1) i2 = iend outWord(ih, i1, i2, true, animation) if(i2 == iend) break i1 = i2 } document.all[index].innerHTML = outString document.all[index].style.posLeft = 0 document.all[index].setAttribute(dynamicanimAttr, null) } if(animation == "zoomIn" || animation == "zoomOut") { ih = el.innerHTML outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">" outString += ih outString += "</SPAN>" document.all[index].innerHTML = outString document.all[index].style.posLeft = 0 document.all[index].setAttribute(dynamicanimAttr, null) } } } i = 0 for (index=document.body.sourceIndex; index < document.all.length; index++) { el = document.all[index] animation = el.getAttribute(dynamicanimAttr, false) if (null != animation) { if(animation == "flyLeft") { el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth el.style.posTop = 0 } else if(animation == "flyRight") { el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth el.style.posTop = 0 } else if(animation == "flyTop" || animation == "dropWord") { el.style.posLeft = 0 el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight } else if(animation == "flyBottom") { el.style.posLeft = 0 el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight } else if(animation == "flyTopLeft") { el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight } else if(animation == "flyTopRight" || animation == "flyTopRightWord") { el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight } else if(animation == "flyBottomLeft") { el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight } else if(animation == "flyBottomRight" || animation == "flyBottomRightWord") { el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight } else if(animation == "spiral") { el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight } else if(animation == "zoomIn") { el.style.posLeft = 10000 el.style.posTop = 0 } else if(animation == "zoomOut") { el.style.posLeft = 10000 el.style.posTop = 0 } else { el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth el.style.posTop = 0 } el.initLeft = el.style.posLeft el.initTop = el.style.posTop animateElements[i++] = el } } window.setTimeout("animate();", speed) } function offsetLeft(el) { x = el.offsetLeft for (e = el.offsetParent; e; e = e.offsetParent) x += e.offsetLeft; return x } function offsetTop(el) { y = el.offsetTop for (e = el.offsetParent; e; e = e.offsetParent) y += e.offsetTop; return y } function startWord(ih, i) { for(tag = false; i < ih.length; i++) { c = ih.charAt(i) if(c == '<') tag = true if(!tag) return i if(c == '>') tag = false } return -1 } function endWord(ih, i) { nonSpace = false space = false while(i < ih.length) { c = ih.charAt(i) if(c != ' ') nonSpace = true if(nonSpace && c == ' ') space = true if(c == '<') return i if(space && c != ' ') return i i++ } return -1 } function outWord(ih, i1, i2, dyn, anim) { if(dyn) outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">" outString += ih.substring(i1, i2) if(dyn) outString += "</SPAN>" } function animate() { el = animateElements[currentElement] animation = el.getAttribute(dynamicanimAttr, false) step++ if(animation == "spiral") { steps = stepsSpiral v = step/steps rf = 1.0 - v t = v * 2.0*Math.PI rx = Math.max(Math.abs(el.initLeft), 200) ry = Math.max(Math.abs(el.initTop), 200) el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx) el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry) } else if(animation == "zoomIn") { steps = stepsZoom el.style.fontSize = Math.ceil(50+50*step/steps) + "%" el.style.posLeft = 0 } else if(animation == "zoomOut") { steps = stepsZoom el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%" el.style.posLeft = 0 } else { steps = stepsFly if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord") steps = stepsWord dl = el.initLeft / steps dt = el.initTop / steps el.style.posLeft = el.style.posLeft - dl el.style.posTop = el.style.posTop - dt } if (step >= steps) { el.style.posLeft = 0 el.style.posTop = 0 currentElement++ step = 0 } if(currentElement < animateElements.length) window.setTimeout("animate();", speed) } //--> </script><script language="JavaScript"> </script> <p align="center" style="position: relative !important; left: 10000 !important"> <FONT COLOR="#0000FF" SIZE="6"> t e k s t </FONT></p> <!-- Eind van script Vallende letters-->

Terug naar boven

Verspringend plaatje.

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
Vervang overal src="image/sneeuw.GIF" door een eigen plaatje,
en src="image/sneeuw2.GIF" door een ander eigen plaatje.
<script language="JavaScript"> <!-- hide var browserOK = false; var pics; // --> </script> <script language="JavaScript1.1"> <!-- hide browserOK = true; pics = new Array(); // --> </script> <script language="JavaScript"> <!-- hide var objCount = 0; // number of (changing) images on web-page function preload(name, first, second) { if (browserOK) { pics[objCount] = new Array(25); pics[objCount][0] = new Image(); pics[objCount][0].src = first; pics[objCount][1] = new Image(); pics[objCount][1].src = second; pics[objCount][2] = name; objCount++; } } function on(name){ if (browserOK) { for (i = 0; i < objCount; i++) { if (document.images[pics[i][2]] != null) if (name != pics[i][2]) { // set back all other pictures document.images[pics[i][2]].src = pics[i][0].src; } else { // show the second image because cursor moves across this image document.images[pics[i][2]].src = pics[i][1].src; } } } } function off(){ if (browserOK) { for (i = 0; i < objCount; i++) { // set back all pictures if (document.images[pics[i][2]] != null) document.images[pics[i][2]].src = pics[i][0].src; } } } preload("link1", "image/sneeuw3.GIF", "image/sneeuw2.GIF"); // --> </script> <a href="javascript.html" onMouseOver="on('link1')" onMouseOut="off()"><img name="link1" src="image/sneeuw3.GIF" border="0"></a> <!-- Eind van script Verspringend plaatje -->

Terug naar boven

Alertbox

Voorbeeld >>>
Zet de tekst uit dit vak tussen de head tags van je pagina
<!-- Begin van alertbox--> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin alert("Dit is een alertbox. Zet hier je eigen welkomsttekst") // End --> </script> <!-- Eind van script Alertbox -->

Terug naar boven

Een bewegende muisaanwijzer

Voorbeeld >>>
Zet de tekst uit dit vak tussen de head tags van je pagina
Vervang in het script "image/xxxxx.gif" door het adres van een eigen plaatje
<!-- Hier begint het muisaanwijzer script ! --> <div id="span0" style="position:absolute;visibility:hidden;"><img src="image/xxxxx.gif"></div> <script> var step=1 var stepbasic=1 var numberofimages=1 var spacebetweenimgs=30 var x,y var flag=0 var xpos=new Array() var ns6=document.getElementById&&!document.all?1:0 for (i=0;i<=8;i++) { xpos[i]=-100 } var ypos=new Array() for (i=0;i<=numberofimages;i++) { ypos[i]=-100 } function handlerMM(e) { x = (document.layers || ns6) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers || ns6) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function initiatetracker() { if (document.all) { for (i=0; i<numberofimages; i++) { var thisspan=eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] thisspan.visibility="visible" } makesnake() } if (ns6) { for (i=0; i<numberofimages; i++) { document.getElementById("span"+i).style.left=xpos[i] document.getElementById("span"+i).style.top=ypos[i] document.getElementById("span"+i).style.visibility="visible" } makesnake() } if (document.layers) { for (i=0; i<numberofimages; i++) { var thisspan=eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] thisspan.visibility="visible" } makesnake() } } function makesnake() { if (flag==1 && document.all) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgs ypos[i]=ypos[i-1] } xpos[0]=x+stepbasic ypos[0]=y for (i=0; i<numberofimages; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } if (flag==1 && ns6) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgs ypos[i]=ypos[i-1] } xpos[0]=x+stepbasic ypos[0]=y for (i=0; i<numberofimages; i++) { document.getElementById("span"+i).style.left=xpos[i] document.getElementById("span"+i).style.top=ypos[i] } } else if (flag==1 && document.layers) { for (i=numberofimages; i>=1; i--) { xpos[i]=xpos[i-1]+spacebetweenimgs ypos[i]=ypos[i-1] } xpos[0]=x+stepbasic ypos[0]=y for (i=0; i<numberofimages; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove=handlerMM; window.onload=initiatetracker </script> <!-- Hier eindigt het muisaanwijzer script !-->

Terug naar boven

Sterrenwolk bij je muisaanwijzer

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina

<!-- Hier begint het sterrenwolk script ! --> <script language="javascript"> if (document.all){ //Wil je meer sterren, voeg dan meer kleuren toe in het rijtje hieronder!! colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000', '000000', '0000ff', '00ffff' ) //Hieronder niets veranderen!! amount=colours.length; YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0; document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">'); for (i=0; i < amount; i++) document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>'); document.write('</div></div>'); ini=1; gstep=1; function iMouse(){ my=event.y;mx=event.x; } document.onmousemove=iMouse function dim(){ ini-=gstep; dt=setTimeout('dim()',10); if (ini < 2){ clearTimeout(dt); glow(); } } function glow(){ ini+=gstep; gt=setTimeout('glow()',10); if (ini > 14){ clearTimeout(gt); dim(); } } function stars(){ ie.style.top=document.body.scrollTop; for (i=0; i < amount; i++) { var layer=iestars[i].style; layer.filter='glow(color='+colours[i]+', strength='+ini+')'; layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10); } currStep+=step; } function delay(){ Ydelay = YgetDelay+=(my-YgetDelay)*1/20; Xdelay = XgetDelay+=(mx-XgetDelay)*1/20; stars(); setTimeout('delay()',10); } delay(); glow(); } </script> <!-- Hier eindigt het sterrenwolk script !-->

Terug naar boven

Buienradar

Zet buienradar op je site. Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
<!-- Begin buienradar --> <IFRAME SRC="http://gratisweerdata.buienradar.nl/buienradar.php" NORESIZE SCROLLING=NO HSPACE=20 VSPACE=20 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=256 HEIGHT=406></IFRAME> <!-- Einde buienradar -->

Terug naar boven

Weerstation

Een echt werkend weerstation op je site. Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
<!-- Begin weerstation --> <table width=200 cellpadding=0 cellspacing=0> <tr> <td><font size=2 face=Verdana><h3>Gegevens van Meetstation De Bilt</h3></font> </td> </tr> <tr> <td>Windrichting<br> <a href="http://www.buienradar.nl/station.aspx?stationnr=6260" target=_top><img src="http://www.buienradar.nl/images.aspx?jaar=-5&stnr=6260&size=150&stsrt=windrichting" border=0></a> </td> </tr> <tr> <td>Windkracht <br><a href="http://www.buienradar.nl/station.aspx?stationnr=6260" target=_top><img src="http://www.buienradar.nl/images.aspx?jaar=-5&stnr=6260&size=150&stsrt=windsnelheid" border=0></a> </td> </tr> <tr> <td> Temperatuur <br> <a href="http://www.buienradar.nl/station.aspx?stationnr=6260" target=_top><img src="http://www.buienradar.nl/images.aspx?jaar=-5&stnr=6260&stsrt=temp" border=0></a> </td> </tr> <tr> <td> Luchtdruk <br> <a href="http://www.buienradar.nl/station.aspx?stationnr=6260" target=_top><img src="http://www.buienradar.nl/images.aspx?jaar=-5&stnr=6260&size=150&stsrt=druk" border=0></a> </td> </tr> <tr> <td > Luchtvochtigheid <br> <a href="http://www.buienradar.nl/station.aspx?stationnr=6260" target=_top><img src="http://www.buienradar.nl/images.aspx?jaar=-5&stnr=6260&size=150&stsrt=vochtig" border=0></a> </td> </tr> </table> <!-- Einde weerstation -->

Terug naar boven

Radio 3 op je site

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
<!-- BeginRadio-- --> <object id="MediaPlayer" width=134 height=20 standby="Top radio - The Netherlands" type="application/x-oleobject"> <param name="FileName" value="http://www.omroep.nl/radio3/live20.asx"> <PARAM NAME="AudioStream" VALUE="-1"> <param name="TransparentAtStart" value="true"> <param name="AutoStart" value="true"> <param name="AnimationatStart" value="false"> <param name="ShowStatusBar" value="true"> <param name="ShowControls" value="true"> <param name="autoSize" value="false"> <param name="ShowPositionControls" value="false"> <param name="displaySize" value="0"> <param name="AudioStream" value="true"> <embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/isapi/redir.dll?prd=windows&sbp=mediaplayer&ar=Media&sba=Plugin&" src="http://www.omroep.nl/radio3/live20.asx" autostart=1 width=200 height=20 transparentatstart=0 animationatstart=0 showcontrols=0 showstatusbar=1 autosize=0 displaysize=0 audiostream=1> </embed></OBJECT> <!--EindRadio-->

Terug naar boven

Gastenboek

Voorbeeld >>>
Zet de tekst uit dit vak tussen de body tags van je pagina
Vul in plaats van CODE de code in. Vul in plaats van WEBSITE de naam van jouw website in.
Vraag aan de cursusbegeleidster welke code en website je hier moet invullen.
Je hebt dan op je website een eigen gastenboek.
Dit gastenboek werkt alleen voor cursisten van Technika 10 Keistad!!

Wil jij ook graag een gastenboek op je website, maar je volgt niet de cursus.
Stuur ons dan een Dit e-mailadres is beschermd door spambots, je hebt Javascript nodig om dit te kunnen bekijken
Geef in je mail aan wat de naam is van je website.

Het is mogelijk om de kleuren van je gastenboek aan te passen.
Verander in het webadres dan het volgende:
- achtergrond = kleur van de achtergrond van het gastenboek. Nu is de kleur rgb(255,255,255), dus wit.
- balken = kleur van de scheidingslijnen tussen de berichten. Nu is de kleur rgb(255,0,0), dus rood.
- letters = kleur van de letters. Nu is de kleur van de letters rgb(0,0,0), dus zwart.
- balkletters = de kleur van de letters in de balk boven een bericht. Nu is de kleur rgb(0,0,255), dus blauw.
Je kunt ook de afmetingen van het vak aanpassen. Verander dan de getallen bij ´width´ en ´height´

<!-- BeginGastenboek--> <iframe src="http://www.technika10keistad.nl/CODE/gastenboek.php?website=WEBSITE&amp;achtergrond=rgb(255,255,255)&amp;balken=rgb(255,0,0)&amp;letters=rgb(0,0,0)&amp;balkletters=rgb(0,0,255)" width="800" height="800"></iframe> <!--EindGastenboek-->

Terug naar boven

• Home
• Technika 10 Keistad
  • Over ons
  • Nieuwsbrief
  • Cursuslocatie
  • DJO
• Cursussen
  • Girltec - techniek
  • iGirl - computer
  • Locatie, tijden en prijzen
• Cursusrooster
• On-line inschrijven
• Inschrijfformulier
• Evenementen
• Meehelpen
  • Vrijwilligsters
  • Sponsors
• Contact en route
  • Contact en route
  • Informatie aanvragen
  • Inschrijven
• Links
  • Animatie maken
  • Game Maker
  • Hout/Metaal
  • Robots
  • Website maken
  • Overige links
• Gastenboek
• Inspiratie
• Zoek

Colofon