Plaats de html code op de plaats waar het effect moet verschijnen, en plaats het javascript zo laag als mogelijk in de body-sectie van de pagina. Bepaal de hoogte en de breedte van de div in de src parameters (in de div "effect_container") en voer dezelfde getallen in bij de hoogte_dissolve_venster en breedte_dissolve_venster (boven) in het script. Voer een willekeurig aantal images in (in de plaatjes_array) en alles behoort dan te werken. Het script is foutloos volgens de strenge JSLint-noem en is geheel cross browser. Voor het geval dat je het nog niet gedaan had: ga met jouw muis over en out (de image) om de plaatjes te laten wisselen.
<div class='effect_container' onmouseover="openen();" onmouseout="sluiten();">
<div id='linksboven'></div><div id='linksbeneden'></div>
<div id='rechtsboven'></div><div id='rechtsbeneden'></div>
<img id="dissolve_id"
src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII='
alt="dissolve effect" width="240" height="210" />
</div>
<script>
var hoogte_dissolve_venster = 210;
var breedte_dissolve_venster = 240;
var plaatjes_array = [];
plaatjes_array[1] = "http://static.dns5.nl/dissolve-1.jpg";
plaatjes_array[2] = "http://static.dns5.nl/dissolve-2.jpg";
plaatjes_array[3] = "http://static.dns5.nl/dissolve-3.jpg";
plaatjes_array[4] = "http://static.dns5.nl/dissolve-4.jpg";
plaatjes_array[5] = "http://static.dns5.nl/dissolve-5.jpg";
var ie_browser = {
browser_versie: function() {
var de_versie = 999;
if (navigator.appVersion.indexOf("MSIE") !== -1) {
de_versie = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
return de_versie;
}
};
var nummer_plaatje_1 = 1;
var nummer_plaatje_2 = 2;
var nieuwe_dissolve_afbeelding;
var script_klaar = 0;
var aantal_plaatjes = plaatjes_array.length;
var stricte_browser = document.namespaces ? 0 : 1;
if (ie_browser >8) {stricte_browser = 1;}
if (!stricte_browser) {
var effect_css_code = "#linksboven{clip:rect(0px " + (breedte_dissolve_venster / 2) + "px " + (hoogte_dissolve_venster / 2) + "px 0px);}" + "#linksbeneden{clip:rect(" + (hoogte_dissolve_venster / 2) + "px " + (breedte_dissolve_venster / 2) + "px " + (hoogte_dissolve_venster) + "px 0px)}" + "#rechtsboven{clip:rect(0px " + (breedte_dissolve_venster) + "px " + (hoogte_dissolve_venster / 2) + "px " + (breedte_dissolve_venster / 2) + "px)}" + "#rechtsbeneden{clip:rect(" + (hoogte_dissolve_venster / 2) + "px " + (breedte_dissolve_venster) + "px " + (hoogte_dissolve_venster) + "px " + (breedte_dissolve_venster / 2) + "px)}" + ".effect_container{position:relative;width:" + (breedte_dissolve_venster) + "px;height:" + (hoogte_dissolve_venster) + "px;overflow:hidden;}" + "#linksboven,#linksbeneden,#rechtsboven,#rechtsbeneden{height:" + (hoogte_dissolve_venster) + "px;width:" + (breedte_dissolve_venster) + "px;" + "position:absolute;top:0px;left:-0%;background:url(" + plaatjes_array[nummer_plaatje_1] + ") no-repeat}";
} else {
var effect_css_code = "#linksboven{clip:rect(0px," + (breedte_dissolve_venster / 2) + "px," + (hoogte_dissolve_venster / 2) + "px,0px);}" + "#linksbeneden{clip:rect(" + (hoogte_dissolve_venster / 2) + "px," + (breedte_dissolve_venster / 2) + "px," + (hoogte_dissolve_venster) + "px,0px)}" + "#rechtsboven{clip:rect(0px," + (breedte_dissolve_venster) + "px," + (hoogte_dissolve_venster / 2) + "px," + (breedte_dissolve_venster / 2) + "px)}" + "#rechtsbeneden{clip:rect(" + (hoogte_dissolve_venster / 2) + "px," + (breedte_dissolve_venster) + "px," + (hoogte_dissolve_venster) + "px," + (breedte_dissolve_venster / 2) + "px)}" + ".effect_container{position:relative;width:" + (breedte_dissolve_venster) + "px;height:" + (hoogte_dissolve_venster) + "px;overflow:hidden;}" + "#linksboven,#linksbeneden,#rechtsboven,#rechtsbeneden{height:" + (hoogte_dissolve_venster) + "px;width:" + (breedte_dissolve_venster) + "px;" + "position:absolute;top:0px;left:-0%;background:url(" + plaatjes_array[nummer_plaatje_1] + ") no-repeat}";
}
var effect_style_element = document.createElement("style");
effect_style_element.type = "text/css";
if (effect_style_element.styleSheet) {
effect_style_element.styleSheet.cssText = effect_css_code;
} else {
effect_style_element.appendChild(document.createTextNode(effect_css_code));
}
document.getElementsByTagName("head")[0].appendChild(effect_style_element);
function verander_dissolve(nummer) {
nieuwe_dissolve_afbeelding = "url(" + plaatjes_array[nummer] + ")";
document.getElementById('linksboven').style.backgroundImage = nieuwe_dissolve_afbeelding;
document.getElementById('linksbeneden').style.backgroundImage = nieuwe_dissolve_afbeelding;
document.getElementById('rechtsboven').style.backgroundImage = nieuwe_dissolve_afbeelding;
document.getElementById('rechtsbeneden').style.backgroundImage = nieuwe_dissolve_afbeelding;
}
var xx, lb, lo, rb, ro, yy, x, y, n, nn, m, mm, stop_het_effect, stop_het_effect2, honderd_procent = 50,
transition_procent = 0,
eventjes, eventjes100;
function doeopen() {
x.style.left = -transition_procent + "%";
x.style.top = -transition_procent + "%";
x.style.width = honderd_procent + "%";
n.style.top = transition_procent + "%";
n.style.left = -transition_procent + "%";
n.style.width = honderd_procent + "%";
y.style.left = -transition_procent + "%";
y.style.top = transition_procent + "%";
y.style.width = (honderd_procent * 2) + "%";
m.style.left = -transition_procent + "%";
m.style.top = -transition_procent + "%";
m.style.width = (honderd_procent * 2) + "%";
eventjes = transition_procent;
eventjes100 = honderd_procent;
if (transition_procent == -50) {
clearInterval(stop_het_effect);
if (script_klaar === 0) {
script_klaar = 1;
nummer_plaatje_1 = nummer_plaatje_1 + 2;
nummer_plaatje_2++;
if (nummer_plaatje_1 > aantal_plaatjes - 1) {
nummer_plaatje_1 = 1;
nummer_plaatje_2 = 1;
}
}
verander_dissolve(nummer_plaatje_1);
return;
}
transition_procent = transition_procent - 1;
honderd_procent = honderd_procent - 1;
}
function doedicht() {
xx.style.left = -transition_procent + "%";
xx.style.top = -transition_procent + "%";
xx.style.width = honderd_procent + "%";
nn.style.top = transition_procent + "%";
nn.style.left = -transition_procent + "%";
nn.style.width = honderd_procent + "%";
yy.style.top = transition_procent + "%";
yy.style.left = -transition_procent + "%";
yy.style.width = (honderd_procent * 2) + "%";
mm.style.top = -transition_procent + "%";
mm.style.left = -transition_procent + "%";
mm.style.width = (honderd_procent * 2) + "%";
if (transition_procent === 0) {
clearInterval(stop_het_effect2);
if (script_klaar == 1) {
script_klaar = 0;
nummer_plaatje_2++;
if (nummer_plaatje_2 > aantal_plaatjes - 1) {
nummer_plaatje_1 = 0;
nummer_plaatje_2 = 1;
}
document.getElementById("dissolve_id").src = plaatjes_array[nummer_plaatje_2];
}
return;
}
transition_procent = transition_procent + 1;
honderd_procent = honderd_procent + 1;
}
function openen() {
clearInterval(stop_het_effect2);
x = document.getElementById('linksboven');
n = document.getElementById('linksbeneden');
y = document.getElementById('rechtsboven');
m = document.getElementById('rechtsbeneden');
eventjes = transition_procent;
eventjes100 = honderd_procent;
stop_het_effect = setInterval(function () {
doeopen();
}, 10);
}
function sluiten() {
clearInterval(stop_het_effect);
xx = document.getElementById("linksboven");
nn = document.getElementById('linksbeneden');
yy = document.getElementById('rechtsboven');
mm = document.getElementById('rechtsbeneden');
transition_procent = eventjes;
honderd_procent = eventjes100;
stop_het_effect2 = setInterval(function () {
doedicht();
}, 8);
}
setTimeout(function () {
document.getElementById("dissolve_id").src = plaatjes_array[nummer_plaatje_2];
}, 200);
</script>