home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

FADER DEMO

Deze image fader wordt "geregeld" door een klein javascriptje en een div. Ik heb hem op de dns5 gezet omdat ik op ons mooie internet een paar voorbeelden heb gezien die precies hetzelfde doen (als deze kleine procedure) maar daar zo'n slordige 70 Kb (JQuery-meuk) voor nodig blijken te hebben. Deze hele pagina is ongecomprimeerd nog geeneens 10 Kb... Het is echt belangrijk voor de zoekrobots (speciaal van google) dat jouw pagina zo snel als mogelijk op het scherm "staat". JQuery is nou precies iets wat daar niet echt bij helpt.

Voor wat betreft de fade-image-procedure heb ik achtereenvolgens de CSS, html en het stukje javascript hieronder neer-gezet.

De CSS:

<style type="text/css">
	.fader{margin-left:100px}
	.fader p{
		margin-top:45px;
		margin-left:10px;
		position:absolute;
		z-index:2;
		font-size:40px;
		font-family: 'Times New Roman', Times, serif;
		color:#82B282;
		background:inherit}
	.fader img{
		position:absolute}
</style>
		

De HTML:

<div class="fader">
	<img onload="maak_leeg('maar');" onmouseover="fade_in('maar');" onmouseout="fade_out('maar');" id="maar" src="http://static.dns5.nl/fade-demo.gif" />
	<p onmouseover="fade_in('maar');" onmouseout="fade_out('maar');">FADER DEMO</p>
</div>
		

Het stukje javascript:

<script type="text/javascript">
	var i=0,x,b,stoppen,beginnen;
	function maak_leeg(elementid){
		x=document.getElementById(elementid);
		x.style.filter='alpha(opacity=0)';x.style.opacity=0;}
	function fade_out(elementid){ 
		clearInterval(beginnen);
		stoppen=setInterval("fixdediv('"+elementid+"')",2);}
	function fixdediv(x){x=document.getElementById(x);
		b=i/10;x.style.opacity=b/10;
		x.style.filter='alpha(opacity='+b*10+')';
		if(i<6){x.style.filter='alpha(opacity=0)';x.style.opacity=0;
		clearInterval(stoppen);x.style.zIndex=1;}
	i=i-1;}
	function fade_in(elementid){ 
		clearInterval(stoppen);
		beginnen=setInterval("fixstop('"+elementid+"')",20);}
	function fixstop(x){x=document.getElementById(x);
		b=i/10;x.style.opacity=b/10;
		x.style.filter='alpha(opacity='+b*10+')';
		if(i>46){i=50;x.style.filter='alpha(opacity=50)';x.style.opacity=0.5;
		clearInterval(beginnen);}
	i=i+1;}
</script>
		

Zoal je gewend bent valideert de pagina op de html, de css en het javascript. Ook WAI geeft groen licht.

cache 28-01-2011