JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home   CSS   DHTML   Forum    E-mail   Sitezoeker   Links

Linkanimatie

Beweeg de cursor over deze stippen om het effect te zien. Elke stip bestaat uit 5 verschillende afbeeldingen. Wanneer je de cursor op een stip plaatst start een animatie en worden achtereenvolgens afbeeldingen 1,2,3,4,5 na elkaar getoond. Wanneer je de cursor van een stip wegneemt start een animatie en worden achtereenvolgens afbeeldingen 5,4,3,2,1 na elkaar getoond. In dit voorbeeld zijn 5 kleurvariaties van eenzelfde figuur gebruikt. Je kunt ook verschillende en meer of minder afbeeldingen gebruiken: dit script is universeel bruikbaar om er allerlei effecten mee te realiseren. De tussentijd is voor elke afbeelding afzonderlijk in te stellen. 1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina : <script type="text/javascript"> // beeldjes voorladen image1 = new Image();image1.src = "../pics/groen0.gif"; image2 = new Image();image2.src = "../pics/groen1.gif"; image3 = new Image();image3.src = "../pics/groen2.gif"; image4 = new Image();image4.src = "../pics/groen3.gif"; image5 = new Image();image5.src = "../pics/groen4.gif"; </script> <script type="text/javascript"> var imgslist = new Array( "../pics/groen0.gif", "../pics/groen1.gif", "../pics/groen2.gif", "../pics/groen3.gif", "../pics/groen4.gif" ); var imgs=new Array(); if (document.images) for (x=0; x<imgslist.length; x++) {imgs[x]=new Image(); imgs[x].src = imgslist[x];} </script> <script type="text/javascript"> function on(img) { if (!document.images) return; document.images[img].src = "../pics/groen0.gif"; setTimeout ('document.images["'+img+'"].src = "../pics/groen1.gif";', 60); setTimeout ('document.images["'+img+'"].src = "../pics/groen2.gif";', 120); setTimeout ('document.images["'+img+'"].src = "../pics/groen3.gif";', 180); setTimeout ('document.images["'+img+'"].src = "../pics/groen4.gif";', 240); } function off(img) { if (!document.images) return; document.images[img].src = "../pics/groen4.gif"; setTimeout ('document.images["'+img+'"].src = "../pics/groen3.gif";', 60); setTimeout ('document.images["'+img+'"].src = "../pics/groen2.gif";', 120); setTimeout ('document.images["'+img+'"].src = "../pics/groen1.gif";', 180); setTimeout ('document.images["'+img+'"].src = "../pics/groen0.gif";', 240); } </script> 2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina : <table border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#" onmouseout="off('image1');" onmouseover="on('image1');"><img border="0" name="image1" align="middle" hspace=10 src="../pics/groen0.gif"></a></td> </tr> <tr> <td><a href="#" onmouseout="off('image2');" onmouseover="on('image2');"><img border="0" name="image2" align="middle" hspace=10 src="../pics/groen0.gif"></a></td> </tr> <tr> <td><a href="#" onmouseout="off('image3');" onmouseover="on('image3');"><img border="0" name="image3" align="middle" hspace=10 src="../pics/groen0.gif"></a></td> </tr> <tr> <td><a href="#" onmouseout="off('image4');" onmouseover="on('image4');"><img border="0" name="image4" align="middle" hspace=10 src="../pics/groen0.gif"></a></td> </tr> <tr> <td><a href="#" onmouseout="off('image5');" onmouseover="on('image5');"><img border="0" name="image5" align="middle" hspace=10 src="../pics/groen0.gif"></a></td> </tr> </table> Noot: Wellicht omdat het hier slechts om een weinig spectaculair voorbeeld gaat worden de mogelijkheden van dit script onderschat. Je kunt er fantastische animaties mee maken.

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.