Het voordeel van progressive enhancement is dat als een bezoeker een verouderde bowser gebruikt, hij niets merkt van het ontbreken van zaken die de browser niet aan kan. Maar ook als een bezoeker javascript uitgeschakeld heeft staan mag hij niets merken van enig ongemak. Als jij wél jouw javascript "aan hebt staan" zie je de fader-demo tekst. Ga er met jouw muis over om de fade te zien. Als je deze procedure ergens op jouw pagina('s) wilt gebruiken, moet je het onderstaande javascript zo laag als mogelijk in de body-sectie van de pagina plaatsen. De div die je in de "html code" ziet staan, plaats je ergens op de pagina waar het fade-effect moet verschijnen. Kijk even in het script naar de variabelen. De weg wijst zich zelf. Geef de naam van een afbeelding, afmetingen en positie, en alles zal naar wens en geheel cross browser werken. Het script is foutloos volgens de strenge JSLint norm.
<div id="fade_image_achtergrond"></div>
<script>
var tekst_voor_fade="FADER DEMO";
var font_size_text_in_px=40;
var naam_afbeelding = "http://static.dns5.nl/fade-demo.png";
var hoogte_afbeelding = 162;
var breedte_afbeelding = 285;
var marge_top = 45;
var marge_links = 10;
var code_voor_fade_div = '<div class="fader"><img onload="maak_div_leeg(' + "'fading_div');" +
'" onmouseover="fade_in(' + "'fading_div');" + '" onmouseout="fade_out(' +
"'fading_div');" + '" id=' +
"'fading_div' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl2" +
"1bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII='" +
" width='" + breedte_afbeelding + "' height='" + hoogte_afbeelding +
"' alt='fade image' />" + '<p onmouseover="fade_in(' + "'fading_div');" +
'" onmouseout="fade_out(' + "'fading_div');" + '">'+tekst_voor_fade+'</p></div>';
document.getElementById("fade_image_achtergrond").innerHTML = code_voor_fade_div;
var fader_css_code = ".fader{height:" + hoogte_afbeelding + "px}.fader p{margin-top:" + marge_top +
"px;margin-left:" + marge_links +
"px;position:absolute;z-index:2;font-size:"+font_size_text_in_px+
"px;background:inherit}.fader img{position:absolute}",
stijl_element = document.createElement("style");
stijl_element.type = "text/css";
if (stijl_element.styleSheet) {
stijl_element.styleSheet.cssText = fader_css_code;
} else {
stijl_element.appendChild(document.createTextNode(fader_css_code));
}
document.getElementsByTagName("head")[0].appendChild(stijl_element);
var i = 0, x, b, eindig_fade, start_fade;
function maak_div_leeg(elementid) {
x = document.getElementById(elementid);
x.style.filter = 'alpha(opacity=0)';
x.style.opacity = 0;
}
function fade_out(elementid) {
clearInterval(start_fade);
eindig_fade = setInterval("process_de_div('" + elementid + "')", 2);
}
function process_de_div(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(eindig_fade);
x.style.zIndex = 1;
}
i = i - 1;
}
function fade_in(elementid) {
clearInterval(eindig_fade);
start_fade = setInterval("process_fade_stop('" + elementid + "')", 20);
}
function process_fade_stop(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(start_fade);
}
i = i + 1;
}
function laad_fader_plaatje() {
document.getElementById("fading_div").src = naam_afbeelding;
}
setTimeout(function() {
laad_fader_plaatje();
},
300);
</script>