Tips and tricks for the homepage




















Inleiding:
Je komt ze vaak tegen, tijdens het surfen, ineens zo'n handige javascript, of een andere tip
om je homepage net dat beetje extra te geven.
Natuurlijk zijn er ook allerlei webpages die zich juist gespecialiseerd hebben in het publiceren
van al die tips. Deze sites vind je terug bij mijn favorieten.
Hieronder enkele van deze tips.


Scrollende tekst:
 Zet op de paats waar je een scrollende tekst wilt hebben de onderstaande regel:
 <marquee bgcolor="green" width="100%" direction="left" loop="0"> Voer hier de tekst is </marquee> Het resultaat: een nieuwsbalk waar je allerlei in het oog springende informatie kan plaatsen.
Je kan de kleuren, looprichting en grootte aanpassen.
 Op deze wijze kan je de tekst scrollen

Een andere optie is:

<script language="JavaScript"> <!-- function ticker() { setTimeout("document.ticker.ticker.value = ('Een hele handige nieuwsticker!')",0) setTimeout("document.ticker.ticker.value = ('Waar je een hoop in kwijt kunt!')",2500) setTimeout("document.ticker.ticker.value = ('Je kunt zo nog uren doorgaan.')",5000) setTimeout("ticker()",7500) } ticker() // --> </script> <form name="ticker"> <input name="ticker" SIZE="40" style="border: 2px solid #666666;background:#669999; "> </form> Met als resultaat:


Een foto of afbeelding op een vaste plek.
Een javascript waarmee een afbeelding op een vaste plek op het beeld blijf staan. Handig voor logo's.

Plaats tussen de head-taqs het volgende script:
<SCRIPT LANGUAGE="JavaScript"> function setVariables() { imgwidth=65; // lengte foto imgheight=45; // hoogtr foto if (navigator.appName == "Netscape") { horz=".left"; vert=".top"; docStyle="document."; styleDoc=""; innerW="window.innerWidth"; innerH="window.innerHeight"; offsetX="window.pageXOffset"; offsetY="window.pageYOffset"; } else { horz=".pixelLeft"; vert=".pixelTop"; docStyle=""; styleDoc=".style"; innerW="document.body.clientWidth"; innerH="document.body.clientHeight"; offsetX="document.body.scrollLeft"; offsetY="document.body.scrollTop"; } } function checkLocation() { objectXY="branding"; var availableX=eval(innerW); var availableY=eval(innerH); var currentX=eval(offsetX); var currentY=eval(offsetY); x=availableX-(imgwidth+30)+currentX; y=availableY-(imgheight+20)+currentY; evalMove(); setTimeout("checkLocation()",10); } function evalMove() { eval(docStyle + objectXY + styleDoc + horz + "=" + x); eval(docStyle + objectXY + styleDoc + vert + "=" + y); } // End --> </SCRIPT> Plaats in de BODY- tag:
<BODY onload="setVariables(); checkLocation();"> en vervolgens:
<div id="branding" style="position:absolute; visibility:show; left:235px; top:-50px; z-index:2"> <table width=10 bgcolor=#ffffff><td> <a href="index.html" onmouseover="window.status='';return true" onmouseout="window.status='';return true"> <center><img src="yourimage.gif" width="65" height="45" border="0"></center></a></font></td> </table> </div>


Een slide show op je webpage.
Zet onderstaande script in de header van je pagina.
 <SCRIPT LANGUAGE="JavaScript"> <!-- var timeDelay = 5;<!-- stel de vertragingstijd in --> var Pix = new Array ("my_image_01.jpg" <!-- voer de namen van de afbeeldingen in --> ,"my_image_02.jpg" ,"my_image_03.jpg" ,"my_image_04.jpg" ); var howMany = Pix.length; timeDelay *= 1000; var PicCurrentNum = 0; var PicCurrent = new Image(); PicCurrent.src = Pix[PicCurrentNum]; function startPix() { setInterval("slideshow()", timeDelay); } function slideshow() { PicCurrentNum++; if (PicCurrentNum == howMany) { PicCurrentNum = 0; } PicCurrent.src = Pix[PicCurrentNum]; document["ChangingPix"].src = PicCurrent.src; } // End --> </script> On automatisch de slideshow te starten als de pagina geladen wordt de body-tag aangepast met:
<body OnLoad="startPix()"> Plaats vervolgens de img-taq op de plaats waar de slideshow moet worden getoond.
<img name="ChangingPix" src="my_image_01.jpg">


Afbeeldingen in de tekst laten passen.
Om de tekst gladjes langs de afbeelding te laten lopen gebruik je de space attributen van de IMG-tag.
 <IMG src="my_picture" Vspace="10" Hspace="20">
Een andere fotoviewer
Een javascript waarmee bezoekers de foto's kan bekijken.
Zet in de Head-tag de volgende script:
 <SCRIPT LANGUAGE="JavaScript"> var rotate_delay = 5000;<!-- de vertragingstijd tussen de afbeeldingen --> current = 0;<!-- Het nummer van de startafbeelding. 0 correspondert met de 1e foto --> function next() { if (document.slideform.slide[current+1]) { document.images.show.src = document.slideform.slide[current+1].value; document.slideform.slide.selectedIndex = ++current; } else first(); } function previous() { if (current-1 >= 0) { document.images.show.src = document.slideform.slide[current-1].value; document.slideform.slide.selectedIndex = --current; } else last(); } function first() { current = 0; document.images.show.src = document.slideform.slide[0].value; document.slideform.slide.selectedIndex = 0; } function last() { current = document.slideform.slide.length-1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; } function ap(text) { document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop"; rotate(); } function change() { current = document.slideform.slide.selectedIndex; document.images.show.src = document.slideform.slide[current].value; } function rotate() { if (document.slideform.slidebutton.value == "Stop") { current = (current == document.slideform.slide.length-1) ? 0 : current+1; document.images.show.src = document.slideform.slide[current].value; document.slideform.slide.selectedIndex = current; window.setTimeout("rotate()", rotate_delay); } } // End --> </script> Creer daarna de viewer:
 <form name=slideform> <table cellspacing=1 cellpadding=4 bgcolor="#000000"> <tr> <td align=center bgcolor="white"> <b>Image Slideshow</b> </td> </tr> <tr> <td align=center bgcolor="white" width=200 height=150> <img src="my_picture1.jpg" name="show"> </td> </tr> <tr> <td align=center bgcolor="#C0C0C0"> <select name="slide" onChange="change();"> <option value="my_picture1.jpg" selected>First picture's legend <option value="my_picture2.jpg">Second picture's legend <option value="my_picture3.jpg">Third picture's legend <option value="my_picture4.jpg">Fourth picture's legend </select> </td> </tr> <tr> <td align=center bgcolor="#C0C0C0"> <input type=button onClick="first();" value="|<<" title="Beginning"> <input type=button onClick="previous();" value="<<" title="Previous"> <input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay"> <input type=button onClick="next();" value=">>" title="Next"> <input type=button onClick="last();" value=">>|" title="End"> </td> </tr> </table> </form>


Een vaste afbeelding als achtergrond
Ondanks scrollen blijft deze afbeelding op zijn plek.
 <body background="image" bgproperties="fixed">


Een afvinklijst
Leuk om formulieren te maken waarmee je met een muisklil een checkbox activeert.
Plaats de onderstaande tekst tussen de HEAD-tags.
 <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function changeBox(cbox) { box = eval(cbox); box.checked = !box.checked; } // End --> </script> Defineer iedere checkbox op je formulier dan als volgt:
 <input type=checkbox name=box1> <span id="hellospan" style="cursor:hand;" onClick="changeBox('document.formulaire.box1')"> Click on this text to check the box.</span>


Een gekleurde button
Gebruik de volgende html-code:
 <FORM> <INPUT TYPE="button" VALUE="Vul tekst in" style="background-color:yellow"> </FORM> Het resultaat is:


Bullets
Bullets kunnen in allerlei vormen worden weergegeven.
Om de bullet's te definieren kan de UL-tag worden gebruikt.
 <UL TYPE="circle"><!-- verder is mogelijk disc en square --> <LI>First item...</LI> <LI>Second item...</LI> <LI>Third item...</LI> </UL> Het resultaat is:
  • First item...
  • Second item...
  • Third item...


De tags EMBED en NOEMBED
Met deze taqs kan je achtergrondmuziek aan je site toevoegen.
Gebruik de volgende gegevens:
 <EMBED src="loop.wav" width="100" height="32" hidden="false" autostart="true" loop="true"></embed> <NOEMBED>Your browser can't read the musical background of this page</NOEMBED> een andere optie is:
<EMBED SRC="muziek.mp3" LOOP=TRUE AUTOSTART=TRUE WIDTH=145 HEIGHT=15> </EMBED> <NOEMBED> <BGSOUND SRC="muziek.mp3"> </NOEMBED> <br><br>
Een echte Jukebox
Iedere keer een andere muziek als je pagina wordt geladen.
Plaats de onderstaande script tussen de body-tags.
 <script LANGUAGE="JavaScript"> var nummidi = 3<!-- specificeer het aantal muziek clips --> day = new Date() seed = day.getTime() ran = parseInt(((seed - (parseInt(seed/1000,10) * 1000))/10)/100*nummidi + 1,10) if (ran == (1)) midi=("music1.mid") if (ran == (2)) midi=("music2.mid") if (ran == (3)) midi=("music3.mid") document.write('<EMBED SRC= "' + midi + '" HEIGHT=60 WIDTH=144 BGCOLOR="#000000" TXTCOLOR="#FFFFFF" NOSAVE=TRUE LOOP="TRUE" AUTOSTART=TRUE>') document.write('<BGSOUND SRC= "' + midi + '" HEIGHT=55 WIDTH=200 NOSAVE=TRUE loop=infinite AUTOSTART=TRUE>') </script>
Nog een musicale achtergrond
Voeg de volgende tag toe:
 <EMBED SRC="musique.mid" hidden=true autostart=true><!-- musique.mid is de gewenste midifile --> <!-- Hidden="true": this hides the sound control panel. -->


Gekleurde lijnen?
Kijk zelf verder
 <hr color="yellow">
Byzondere Tekens in HTML
De volgende speciale tekens zijn beschikbaar:
 Overzicht Byzondere Tekens Naam Resultaat Omschrijving &#8364; € Het euro teken &lt; < Kleiner-dan teken &gt; > Groter-dan teken &amp; & Ampersand &quot; " Dubbele quotes &ldquo; “ Dubbele quotes links &rdquo; ” Dubbele quotes rechts &lsquo; ‘ Enkele quote links &rsquo; ’ Enkele quote rechts &euro; € Euro teken &nbsp; Spatie &copy; © Copyright-teken &reg; ® Geregistreerd handelsmerk &trade; ™ Trademark teken &uml; ¨ Umlaut &sect; § Paragraaf &sup1; ¹ Superscript 1 &sup2; ² Superscript 2 &sup3; ³ Superscript 3 &frac14; ¼ Een-vierde &frac12; ½ Een half &frac34; ¾ Drie-vierde &deg; ° Graden


Een Redirect Maken
Als je website van domeinnaam veranderd, of bestanden in een andere directory plaats kan je
een redirect maken om bezoekers naar de juiste site te linken.
Plaats dan de onderstaande code in het HEAD gedeelte.
 <meta http-equiv="refresh" content="0;URL=http://www.jouwadres.nl/" /> De bezoeker word direct doorgestuurd


Een eigen startpagina
Een lijst met eigen favorieten, lijkend op een startpagina kan makkelijk gecreerd worden.
Zet allereerst in het head deel:
<style> <!-- A {color: red} A:hover {color: #142f09 } --> </style> Dit hebben we straks nodig om een roll-over effect van de muis te creeren in het menu.
Stel nu een tabel op met 3 of 4 kolommen, volgens de bekende regels.
Vervolgens gaan we items creeren door in de tabel kleine tabellen te zetten
met de volgende structuur:
<table width="167" border="1" cellspacing="0" cellpadding="3" bordercolorlight="#00009C" bordercolordark="#00009C"> <tr bgcolor="#bd2803"><td> <font color="white" face="arial" size="2"> <b>TITEL</b> </font> </td></tr> <TR BGCOLOR="#C6D8FE" BACKGROUND=""><td> <font face="arial" size="2" color="#00009C"> <a href="HIER HEEN LINKEN" target="_blank" STYLE='text-decoration:none'> KNMI </a> <br> <!-- <CENTER><A HREF="meer.shtml" target="main"><FONT SIZE=-2 COLOR="#0000FF" FACE="Arial"> meer weer</FONT></A></CENTER> --> </font> </td></tr> </table> Vul de titel in en de link, of kopieer deze regel voor meer links.
Door de kleurcodes te veranderen kan de lay-out van de tabel aangepast worden.


Printen van een pagina
Zet onderstaande script in het body deel, er verschijnt dan een printbutton waarmee je de
pagina kan laten printen.
<script language="JavaScript"> <!-- Begin if (window.print) { document.write('<form> ' + '<input type=button name=print value="Print pagina" ' + 'onClick="javascript:window.print()"> </form>'); } // End --> </script>


Make this page your favorite
Met dit scriptje kun je een bezoeker jouw pagina in zijn of haar favorieten laten plaatsen.
<a href="javascript:window.external.AddFavorite('http://www.weblessen.nl', 'Weblessen.nl')"> Toevoegen aan favorieten</a>

Of laat ze jouw pagina als startpagina nemen.

<a class="chlnk" style="cursor:hand" href onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://home.planet.nl/~bakk3663/');">Stel deze pagina als startpagina in!</a>
Je eigen telefoongids
Voeg onderstaande script in je webpage en je hebt je eigen telefoonboek.
<table bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#000000" bgcolor="#000000" border="1" style="border-collapse: collapse" cellspacing="0"> <tr> <td align="left" bgColor="#FFFFFF" size="2" face="arial,verdana" bordercolor="#000000"> <form action="http://www.detelefoongids.com/wit/scripts/dtgi.dll/white" method="get" name="TGIGIDS1" target="_blank"> <font color="black"><p><font face="Arial" size="2"> Naam: <input class="inputSM" name="iname" size="16"> Plaats: <input class="inputSM" name="city" size="13"> <input class="inputSM" type="submit" value="Zoek"></font></p> </font> </form> </td> </tr> </table> </center> </div>


Navigatie menu in je website.
Een simpel navigatie menu.
<script LANGUAGE="JavaScript"> <!-- hide this script tag's contents from old browsers function goHist(a) { history.go(a); // Go back one. } // <!-- done hiding from old browsers --> </script> <form METHOD="post"> <input TYPE="button" VALUE="Vorige" onClick="goHist(-1)"> <input TYPE="button" VALUE="Volgende" onClick="goHist(1)"> </form><!-- -->

Met als resultaat:

 Close window
Handig om zo de pop-ups zelf weg te laten klikken.

<a href=javascript:window.close();>Close Window</a>


Zoeken met zoekmachines op je eigen website
<script> function n(naam, statnaam){ top.location.href=naam; } function addplus(items){ var plussed = ""; for (var t = 1 ; t <= items.length ; t++) { if (items.substring(t-1,t) == " ") { plussed+="+"; } else { if (items.substring(t-1,t) == "+") { plussed+="%2B"; } else { plussed+=items.substring(t-1,t); } } } return plussed; } function doSearch(){ var words; words = document.searchforit.query.value; var searchitems; searchitems=addplus(words); var index; index = document.searchforit.service.selectedIndex; var site; site = document.searchforit.service.options[index].value; site+=searchitems; if (notEmpty(searchitems)) { n(site, ('searchengine' + index + '.htm')); } } function notEmpty(word){ if (word == "" || word == null) { alert("U moet natuurlijk wel iets opgeven,\nVoordat u op 'Zoek' kunt klikken..."); document.searchforit.query.focus(); return false; } else { return true; } } </script> </font><form action="javascript:doSearch();void(0)//" method="get"name="searchforit" target="_blank"> <p><font color="#000000"><select name="service" size="1"> <option selected value="http://www.altavista.nl/cgi-bin/query?pg=q&what=web&fmt=&q="> AltaVista</option> <option value="http://www.askjeeves.com/main/askJeeves.asp?origin=&qSource=0&ask="> Ask Jeeves</option> <option value="http://nl.excite.com/search.gw?s=">Excite</option> <option value="http://www.hotbot.com/?mt=">Hotbot</option> <option value="http://www.ilse.nl/?COMMAND=search_for&LANGUAGE=NL&PROFILE=st&FAMILY=no&SEARCH_FOR="> Ilse</option> <option value="http://www2.infoseek.com/Titles?qt=">Infoseek</option> <option value="http://www.nl.lycos.de/cgi-bin/pursuit?adv=0&query=">Lycos</option> <option value="http://www.metacrawler.com/cgi-bin/nph-metaquery.p?general=">Metacrawler</option> <option value="http://www.mybegin.nl/search/?action=Search&cat=World%2FNederlands%2F&all=no&query="> MyBegin</option> <option value="http://www.scoot.nl/start.asp?ce=">Scoot</option> <option value="http://zoeken.track.nl/Raven?sm=1&st=1&pl=10&qr=">Track</option> <option value="http://search.yahoo.com/bin/search?p=">Yahoo</option> </select> <br> <input type="text" size="10" name="query"> <input type="button" value="Zoek" onclick="doSearch()"></font></p> </form> </script> Met als resultaat:



Uitgebreide beschrijvingen over HTML
Kijk op:
duidelijke omschrijvingen over html