In dit voorbeeld wordt de javascript getelementbyid() methode toegepast om de CSS 'left' eigenschap van een absoluut gepositioneerd element (position:absolute) 10 pixels te doen toenemen.
Door deze handeling herhaaldelijk te laten plaatsvinden dmv de javascript setInterval methode ontstaat een 'DHTML animatie'. Wanneer het onClick event wordt geactiveerd door op de link te klikken vliegt het gelinkte plaatje naar rechts.
In dit voorbeeld script wordt de javascript animatie gestopt zodra de CSS 'left' eigenschap de waarde 1000px bereikt heeft.
klik hier:
javascript en css code:
<html>
<head>
<style type="text/css">
#animatie
{position:absolute;}
</style>
<script language="javascript" type="text/javascript">
function animeer()
{
var positie = parseInt(document.getElementById('animatie').style.left);
if (positie < 1000)
{
var nieuwepositie = positie + 10;
document.getElementById('animatie').style.left = nieuwepositie + 'px';
}
}
</script>
</head>
<body>
<a id="animatie" style="left:200px;" onClick="setInterval('animeer()',10)"><img src="celtic.gif" alt="geanimeerd stukje html (klik)"></a>
</body>
</html>
