<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="code.xsl" ?>
<dns4.nl>
<voorbeeld>
<title>cross fade transition</title>
<verwijzende_link>http://www.dns4.nl/pagina/javascript_code/image_cross_fade_transition.html</verwijzende_link>
<informatie>
De style en  het javascript gaan in de head-sectie,
de div met de span's gaan in de body-sectie.

</informatie>
<programma_code>
<![CDATA[
<!-- de code begint vanaf hier.

	<style type="text/css">
		body{color:#000063;}
		#container{position:relative;width:200px;height:150px;margin-left:10%;}    
		#container span{display:block;position:absolute;top:0px; width:250px;height:250px;}    
		#container .bewerk0 {background:url(trevis.jpg) no-repeat;}
		#container .bewerk1 {background:url(twingo.jpg) no-repeat;}
		#container .bewerk2 {background:url(mazda2.jpg) no-repeat;}
		#container .bewerk3 {background:url(mazda6.jpg) no-repeat;}
		#container .bewerk4 {background:url(modus.jpg) no-repeat;}
		#container .bewerk5 {background:url(morgan4.jpg) no-repeat;}
		#container .bewerk6 {background:url(peugot107.jpg) no-repeat;}
		#container .bewerk7 {background:url(qubo.jpg) no-repeat;}
		#container .bewerk8 {background:url(s80.jpg) no-repeat;}
		#container .bewerk9 {background:url(sportbreak.jpg) no-repeat;}
	</style>
	<script type="text/javascript">
		<!--
		var totaalaantalplaatjes=10;
		var interval=10000;
		var tijdvoortransform=5000;
		var i;
		var visible=100;
		var invisible=0;
		var state=0;
		function veranderOpacity(opacity,id) {
		    var object=document.getElementById(id).style;
		    object.opacity=(opacity / 100);
		    object.KhtmlOpacity=(opacity / 100);
		    object.filter="alpha(opacity="+opacity + ")";}
		function opacity(id,opacStart,opacEnd,millisec) {
		    var speed=Math.round(millisec / 100);
		    var timer=0;
		    if (opacStart > opacEnd) {
		        for (i=opacStart;i >= opacEnd;i--){
		            setTimeout("veranderOpacity(" +i+",'"+id+"')",(timer*speed));
		            timer++;}
		    } else if(opacStart < opacEnd) {
		        for (i=opacStart; i <= opacEnd;i++){
		            setTimeout("veranderOpacity(" +i+",'" +id+ "')",(timer * speed));
		            timer++;}}}
		function animeerdeBoel(){
		    opacity('bewerk' + state,visible,invisible,tijdvoortransform);
		    state = (state + 1) % totaalaantalplaatjes;
		    opacity('bewerk' + state,invisible,visible,tijdvoortransform);}
		function startDeHandel(){
		    var i=1;
		    for (i=1; i < totaalaantalplaatjes; i++) {
		        veranderOpacity(0,'bewerk' +i);}
		    var timer=setInterval(animeerdeBoel,interval);}
		window.onload=startDeHandel;
		// -->
	</script>



	<div id="container">
		<span id="bewerk0" class="bewerk0"></span>
		<span id="bewerk1" class="bewerk1"></span>
		<span id="bewerk2" class="bewerk2"></span>
		<span id="bewerk3" class="bewerk3"></span>
		<span id="bewerk4" class="bewerk4"></span>
		<span id="bewerk5" class="bewerk5"></span>
		<span id="bewerk6" class="bewerk6"></span>
		<span id="bewerk7" class="bewerk7"></span>
		<span id="bewerk8" class="bewerk8"></span>
		<span id="bewerk9" class="bewerk9"></span>
	</div>





de code is hier geeindigd.
// -->
]]>
</programma_code>
<code_link>http://www.dns4.nl/pagina/alle_tekst_files.html</code_link>
</voorbeeld>
</dns4.nl>
