Als je de linker-muis-knop ingedrukt houdt als je (horizontaal of verticaal) over het plaatje gaat, zie je waar het script toe in staat is. De vergrotings-factor of de grootte van het "vergrootglas" wordt traploos veranderd. De kwaliteit van de procedure hangt af van hoeveel bandbreedte je wilt gebruiken voor de grote "magnifier image". Hoe hoger de resolutie van die afbeelding is, hoe scherper de vergroting wordt. In dit voorbeeld zie je de procedure op z'n "slechts" (en dat is al indrukwekkend...). Plaats de html code in de body sectie van jouw pagina (waar het vergrootglas-effect moet komen) en voer de adressen in van, respectievelijk, de kleine afbeelding (een verkleinde uitvoering van het grote plaatje) die op het scherm getoond wordt en de grote afbeelding die bepaalt hoe hoog de kwaliteit van de "loupe" wordt/is. Als je dan ook nog het javascript zo laag als mogelijk in de body sectie van jouw pagina plaatst, zal de magnifier-procedure cross browser en foutloos (volgens JSLint) zijn werk doen. Je kan in het script nog wel een paar "dingetjes" aanpassen. De variabelen hebben hele duidelijke namen (zoals: de_maximale_zoom en de_zoom_breedte etc.). Kopieer (om even snel de vergrootglas-procedure op jouw website te testen) ook even de twee graphics van deze pagina naar jouw webruimte. Dat zijn http://static.dns5.nl/magnifier-klein.jpg en http://static.dns5.nl/magnifier-groot.jpg.
<p>
<img src="magnifier-klein.jpg" onmouseover="magnify(this,'magnifier-groot.jpg')" width="256" height="380" alt="" />
</p>
<script>
/*global window: false */
var het_stadium,
tussen_variabele,
loupe_breedte,
loupe_hoogte,
tijdelijk,
t,
eerste_clip,
tweede_clip,
derde_clip,
vierde_clip,
de_fase,
vergrootglas_y,
vergrootglas_x,
regel_y_af,
voor_object,
glas_var,
object_houder,
loupe_var_3,
een_tijdelijke_var,
ander_muis_x,
ander_muis_y,
de_win,
x,
regel_x_af,
magnifier_wit,
geen_stijl,
ratio_van_zoom,
de_maximale_zoom = 12,
de_minimale_zoom = 1,
variabele_muis = 0,
hoeveelheid_zoom = 4,
magnify_2 = 0,
magnify_1 = 0,
de_zoom_hoogte = 99,
de_zoom_breedte = 132,
de_zoom_offset_x = 0.5,
de_zoom_offset_y = 0.5;
function vind_positie_van_x(loupe) {
var huidige_links = 0;
if (!loupe) {
return 0;
}
if (loupe && loupe.offsetParent) {
while (loupe.offsetParent) {
huidige_links += loupe.offsetLeft;
loupe = loupe.offsetParent;
}
} else if (loupe.x) {
huidige_links += loupe.x;
}
return huidige_links;
}
function vind_positie_van_y(loupe) {
var huidige_top = 0;
if (!loupe) {
return 0;
}
if (loupe.offsetParent) {
while (loupe.offsetParent) {
huidige_top += loupe.offsetTop;
loupe = loupe.offsetParent;
}
} else if (loupe.y) {
huidige_top += loupe.y;
}
return huidige_top;
}
function verander_de_afmeting_van(loupe) {
loupe_var_3 = 0;
een_tijdelijke_var = 0;
if (de_zoom_breedte - 2 * magnify_2 - 3 * magnify_1 < 22) {
loupe_var_3 = 1;
}
if (de_zoom_hoogte - 2 * magnify_2 - 3 * magnify_1 < 22) {
loupe_var_3 = 1;
}
if (de_zoom_breedte > parseFloat(loupe.style.width)) {
een_tijdelijke_var = 1;
}
if (de_zoom_hoogte > parseFloat(loupe.style.height)) {
een_tijdelijke_var = 1;
}
if (loupe_var_3 == 1 && een_tijdelijke_var == 1) {
de_zoom_breedte = parseFloat(loupe.style.width) / 2;
de_zoom_hoogte = parseFloat(loupe.style.height) / 2;
ratio_van_zoom = de_zoom_hoogte / de_zoom_breedte;
}
if (loupe_var_3 == 1) {
if (de_zoom_breedte < de_zoom_hoogte) {
de_zoom_hoogte = de_zoom_hoogte / de_zoom_breedte * (22 + 2 * magnify_2 + 3 * magnify_1);
de_zoom_breedte = 22 + 2 * magnify_2 + 3 * magnify_1;
} else {
de_zoom_breedte = de_zoom_breedte / de_zoom_hoogte * (22 + 2 * magnify_2 + 3 * magnify_1);
de_zoom_hoogte = 22 + 2 * magnify_2 + 3 * magnify_1;
}
}
if (een_tijdelijke_var == 1) {
if (parseFloat(loupe.style.width) / parseFloat(loupe.style.height) > de_zoom_breedte / de_zoom_hoogte) {
de_zoom_hoogte = parseFloat(loupe.style.height);
de_zoom_breedte = de_zoom_hoogte / ratio_van_zoom;
} else {
de_zoom_breedte = parseFloat(loupe.style.width);
de_zoom_hoogte = ratio_van_zoom * de_zoom_breedte;
}
}
de_zoom_breedte = Math.floor(de_zoom_breedte / 2) * 2;
de_zoom_hoogte = Math.floor(de_zoom_hoogte / 2) * 2;
object_houder = loupe.parentNode.getElementsByTagName('div')[0];
object_houder.style.width = de_zoom_breedte + 'px';
object_houder.style.height = de_zoom_hoogte + 'px';
glas_var = object_houder.getElementsByTagName('div')[0];
glas_var.style.width = de_zoom_breedte - magnify_1 * 2 + 'px';
glas_var.style.height = de_zoom_hoogte - magnify_1 * 2 + 'px';
glas_var = object_houder.getElementsByTagName('div')[1];
glas_var.style.width = de_zoom_breedte - magnify_1 * 2 - magnify_2 * 2 + 'px';
glas_var.style.height = de_zoom_hoogte - magnify_1 * 2 - magnify_2 * 2 + 'px';
if (magnify_1 > 0) {
glas_var = object_houder.getElementsByTagName('span')[1];
glas_var.style.margin = '0 0 0 ' + (de_zoom_breedte - magnify_1 * 2) + 'px';
glas_var = object_houder.getElementsByTagName('span')[2];
glas_var.style.margin = (de_zoom_hoogte - magnify_1 * 2) + 'px 0 0 0px';
glas_var = object_houder.getElementsByTagName('span')[3];
glas_var.style.margin = (de_zoom_hoogte - magnify_1 * 2) + 'px 0 0 ' + (de_zoom_breedte - magnify_1 * 2) + 'px';
glas_var = object_houder.getElementsByTagName('span')[6];
glas_var.style.margin = (magnify_1 * 2) + 'px 0 0 ' + (de_zoom_breedte - magnify_1 * 2) + 'px';
glas_var = object_houder.getElementsByTagName('span')[7];
glas_var.style.margin = (de_zoom_hoogte - magnify_1 * 2) + 'px 0 0 ' + (magnify_1 * 2) + 'px';
voor_object = (de_zoom_breedte - magnify_1 * 4) + 'px';
glas_var = object_houder.getElementsByTagName('span')[4];
glas_var.style.width = voor_object;
glas_var = glas_var.getElementsByTagName('img')[0];
glas_var.style.width = voor_object;
glas_var = object_houder.getElementsByTagName('span')[7];
glas_var.style.width = voor_object;
glas_var = glas_var.getElementsByTagName('img')[0];
glas_var.style.width = voor_object;
voor_object = (de_zoom_hoogte - magnify_1 * 4) + 'px';
glas_var = object_houder.getElementsByTagName('span')[5];
glas_var.style.height = voor_object;
glas_var = glas_var.getElementsByTagName('img')[0];
glas_var.style.height = voor_object;
glas_var = object_houder.getElementsByTagName('span')[6];
glas_var.style.height = voor_object;
glas_var = glas_var.getElementsByTagName('img')[0];
glas_var.style.height = voor_object;
}
}
function regel_win(loupe, vergrootglas_x, vergrootglas_y) {
loupe.parentNode.getElementsByTagName('div')[0].style.display = 'block';
de_fase = loupe.parentNode.getElementsByTagName('div')[0];
if (variabele_muis == 1) {
if (Math.abs(vergrootglas_y - ander_muis_y) >= 1) {
hoeveelheid_zoom *= ((vergrootglas_y > ander_muis_y) ? (0.909) : (1.1));
ander_muis_y = vergrootglas_y;
if (hoeveelheid_zoom < de_minimale_zoom) {
hoeveelheid_zoom = de_minimale_zoom;
}
if (hoeveelheid_zoom > de_maximale_zoom) {
hoeveelheid_zoom = de_maximale_zoom;
}
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width = parseInt(loupe.style.width, 10) * hoeveelheid_zoom + 'px';
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height = parseInt(loupe.style.height, 10) * hoeveelheid_zoom + 'px';
if (de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.width = de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width;
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.height = de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height;
}
}
if (Math.abs(vergrootglas_x - ander_muis_x) >= 12) {
de_zoom_breedte *= ((vergrootglas_x > ander_muis_x) ? (1.1) : (0.909));
de_zoom_hoogte = de_zoom_breedte * ratio_van_zoom;
verander_de_afmeting_van(loupe);
ander_muis_x = vergrootglas_x;
}
}
de_fase.style.marginLeft = vergrootglas_x - (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1) * de_zoom_offset_x - magnify_2 - magnify_1 + 'px';
de_fase.style.marginTop = vergrootglas_y - (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1) * de_zoom_offset_y - magnify_2 - magnify_1 + 'px';
eerste_clip = 0;
tweede_clip = de_zoom_breedte;
derde_clip = de_zoom_hoogte;
vierde_clip = 0;
loupe_breedte = de_zoom_breedte;
loupe_hoogte = de_zoom_hoogte;
tijdelijk = (1 - 2 * de_zoom_offset_x) * (magnify_2 + magnify_1);
if (vergrootglas_x - de_zoom_breedte * de_zoom_offset_x < tijdelijk) {
vierde_clip = de_zoom_breedte * de_zoom_offset_x - vergrootglas_x + tijdelijk;
} else if (parseFloat(vergrootglas_x - de_zoom_breedte * de_zoom_offset_x + de_zoom_breedte) > parseFloat(loupe.style.width) + tijdelijk) {
tweede_clip = de_zoom_breedte * de_zoom_offset_x - vergrootglas_x + parseFloat(loupe.style.width) + tijdelijk;
loupe_breedte = de_zoom_breedte * de_zoom_offset_x - vergrootglas_x + parseInt(loupe.style.width, 10) + magnify_2 + magnify_1;
}
tijdelijk = (1 - 2 * de_zoom_offset_y) * (magnify_2 + magnify_1);
if (vergrootglas_y - de_zoom_hoogte * de_zoom_offset_y < tijdelijk) {
eerste_clip = de_zoom_hoogte * de_zoom_offset_y - vergrootglas_y + tijdelijk;
} else if (parseFloat(vergrootglas_y - de_zoom_hoogte * de_zoom_offset_y + de_zoom_hoogte) > parseFloat(loupe.style.height) + tijdelijk) {
derde_clip = de_zoom_hoogte * de_zoom_offset_y - vergrootglas_y + parseFloat(loupe.style.height) + tijdelijk;
loupe_hoogte = de_zoom_hoogte * de_zoom_offset_y - vergrootglas_y + parseFloat(loupe.style.height) + magnify_2 + magnify_1;
}
de_fase.style.width = loupe_breedte + 'px';
de_fase.style.height = loupe_hoogte + 'px';
de_fase.style.clip = 'rect(' + eerste_clip + 'px,' + tweede_clip + 'px,' + derde_clip + 'px,' + vierde_clip + 'px)';
if (vergrootglas_y - de_zoom_offset_y * (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1) < 0) {
t = -(vergrootglas_y - de_zoom_offset_y * (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1));
} else if (vergrootglas_y - de_zoom_offset_y * (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1) > parseFloat(loupe.style.height) - de_zoom_hoogte + magnify_2 * 2 + magnify_1 * 2) {
t = -hoeveelheid_zoom * parseFloat(loupe.style.height) + de_zoom_hoogte - magnify_2 * 2 - magnify_1 * 2 - ((vergrootglas_y - de_zoom_offset_y * (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1)) - (parseFloat(loupe.style.height) - de_zoom_hoogte + magnify_2 * 2 + magnify_1 * 2));
} else {
t = ( - hoeveelheid_zoom * parseFloat(loupe.style.height) + de_zoom_hoogte - magnify_2 * 2 - magnify_1 * 2) / (parseFloat(loupe.style.height) - de_zoom_hoogte + magnify_2 * 2 + magnify_1 * 2) * (vergrootglas_y - de_zoom_offset_y * (de_zoom_hoogte - 2 * magnify_2 - 2 * magnify_1));
}
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop = t + 'px';
if (de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginTop = t + 'px';
}
if (vergrootglas_x - de_zoom_offset_x * (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1) < 0) {
t = -(vergrootglas_x - de_zoom_offset_x * (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1));
} else if (vergrootglas_x - de_zoom_offset_x * (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1) > parseFloat(loupe.style.width) - de_zoom_breedte + magnify_2 * 2 + magnify_1 * 2) {
t = -hoeveelheid_zoom * parseFloat(loupe.style.width) + de_zoom_breedte - magnify_2 * 2 - magnify_1 * 2 - ((vergrootglas_x - de_zoom_offset_x * (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1)) - (parseFloat(loupe.style.width) - de_zoom_breedte + magnify_2 * 2 + magnify_1 * 2));
} else {
t = ( - hoeveelheid_zoom * parseFloat(loupe.style.width) + de_zoom_breedte - magnify_2 * 2 - magnify_1 * 2) / (parseFloat(loupe.style.width) - de_zoom_breedte + magnify_2 * 2 + magnify_1 * 2) * (vergrootglas_x - de_zoom_offset_x * (de_zoom_breedte - 2 * magnify_2 - 2 * magnify_1));
}
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft = t + 'px';
if (de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
de_fase.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginLeft = t + 'px';
}
}
function muis_loupe(gebeurtenis, loupe) {
gebeurtenis = gebeurtenis ? gebeurtenis: window.event ? window.event: null;
if (!gebeurtenis) {
return false;
}
if (gebeurtenis.pageX) {
vergrootglas_x = gebeurtenis.pageX - vind_positie_van_x(loupe) - regel_x_af;
vergrootglas_y = gebeurtenis.pageY - vind_positie_van_y(loupe) - regel_y_af;
} else {
if (document.documentElement && document.documentElement.scrollTop) {
vergrootglas_x = gebeurtenis.clientX + document.documentElement.scrollLeft - vind_positie_van_x(loupe) - regel_x_af;
vergrootglas_y = gebeurtenis.clientY + document.documentElement.scrollTop - vind_positie_van_y(loupe) - regel_y_af;
} else {
vergrootglas_x = gebeurtenis.x + document.body.scrollLeft - vind_positie_van_x(loupe) - regel_x_af;
vergrootglas_y = gebeurtenis.y + document.body.scrollTop - vind_positie_van_y(loupe) - regel_y_af;
}
}
if (gebeurtenis.type == 'mousemove') {
regel_win(loupe, vergrootglas_x, vergrootglas_y);
} else if (gebeurtenis.type == 'mousedown') {
variabele_muis = 1;
ander_muis_y = vergrootglas_y;
ander_muis_x = vergrootglas_x;
} else if (gebeurtenis.type == 'mouseup') {
variabele_muis = 0;
} else if (gebeurtenis.type == 'mouseout') {
variabele_muis = 0;
if (navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) {
x = loupe.parentNode;
x.removeChild(x.getElementsByTagName('div')[0]);
x.removeChild(x.getElementsByTagName('div')[0]);
}
}
}
function magnify(loupe, hogere_so) {
ratio_van_zoom = de_zoom_hoogte / de_zoom_breedte;
if (de_zoom_offset_x > 1) {
de_zoom_offset_x = de_zoom_offset_x / de_zoom_breedte;
de_zoom_offset_y = de_zoom_offset_y / de_zoom_hoogte;
}
if (!loupe.style.width) {
if (loupe.width > 0) {
loupe.style.width = loupe.width + 'px';
loupe.style.height = loupe.height + 'px';
}
}
if (typeof(hogere_so) != typeof('')) {
hogere_so = loupe.src;
}
het_stadium = document.createElement("div");
het_stadium.style.width = loupe.style.width;
het_stadium.style.height = loupe.style.height;
het_stadium.style.overflow = 'hidden';
het_stadium.style.position = 'absolute';
if (typeof(het_stadium.style.filter) != typeof(geen_stijl)) {
if (navigator.appVersion.indexOf('Mac') == -1) {
het_stadium.style.filter = 'alpha(opacity=0)';
het_stadium.style.backgroundColor = '#ffffff';
}
if (navigator.userAgent.indexOf("Opera") != -1) {
het_stadium.style.filter = 'alpha(opacity=0)';
het_stadium.style.backgroundColor = 'transparent';
}
if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
var ffversion=new Number(RegExp.$1)
if (ffversion>3){het_stadium.style.backgroundColor = 'transparent';}
}
} else {
het_stadium.style.backgroundImage = 'transparent';
}
het_stadium.setAttribute('onmousemove', 'muis_loupe(event,this)');
het_stadium.setAttribute('onmousedown', 'muis_loupe(event,this)');
het_stadium.setAttribute('onmouseup', 'muis_loupe(event,this)');
het_stadium.setAttribute('onmouseout', 'muis_loupe(event,this)');
if (navigator.userAgent.indexOf('MSIE') > -1) {
het_stadium.onmousemove = function() {
muis_loupe(event, this);
};
het_stadium.onmousedown = function() {
muis_loupe(event, this);
};
het_stadium.onmouseup = function() {
muis_loupe(event, this);
};
het_stadium.onmouseout = function() {
muis_loupe(event, this);
};
}
loupe.parentNode.insertBefore(het_stadium, loupe);
de_win = document.createElement("div");
de_win.style.width = '0px';
de_win.style.height = '0px';
de_win.style.overflow = 'hidden';
de_win.style.position = 'absolute';
de_win.style.display = 'none';
tussen_variabele = '<div style="position:absolute;overflow:hidden;margin:';
de_win.innerHTML = tussen_variabele + magnify_1 + 'px 0 0 ' + magnify_1 + 'px; width:' + (de_zoom_breedte - magnify_1 * 2) + 'px;height:' + (de_zoom_hoogte - magnify_1 * 2) + 'px"></div>' + tussen_variabele + (magnify_1 + magnify_2) + 'px 0 0 ' + (magnify_1 + magnify_2) + 'px; width:' + (de_zoom_breedte - magnify_1 * 2 - magnify_2 * 2) + 'px;height:' + (de_zoom_hoogte - magnify_1 * 2 - magnify_2 * 2) + 'px;"><img src="' + loupe.src + '" style="position:absolute;margin:0;padding:0;border:0; width:' + (hoeveelheid_zoom * parseInt(loupe.style.width, 10)) + 'px;height:' + (hoeveelheid_zoom * parseInt(loupe.style.height, 10)) + 'px;" />' + ((loupe.src != hogere_so) ? ('<img src="' + hogere_so + '" style="position:absolute;margin:0;padding:0;border:0; width:' + (hoeveelheid_zoom * parseInt(loupe.style.width, 10)) + 'px;height:' + (hoeveelheid_zoom * parseInt(loupe.style.height, 10)) + 'px;" onload="if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}" />') : ('')) + '</div>';
if (hogere_so != loupe.src) {
de_win.innerHTML += '<div style="position:absolute; margin:' + (magnify_1 + magnify_2) + 'px 0 0 ' + (magnify_1 + magnify_2) + 'px;"></div>';
}
loupe.parentNode.insertBefore(de_win, het_stadium);
verander_de_afmeting_van(loupe);
}
function start_magnifier() {
regel_x_af = 0;
regel_y_af = 0;
if (navigator.userAgent.indexOf('MSIE') > -1) {
regel_x_af = 2;
regel_y_af = 2;
}
if (navigator.userAgent.indexOf('Opera') > -1) {
regel_x_af = 0;
regel_y_af = 0;
}
if (navigator.userAgent.indexOf('Safari') > -1) {
regel_x_af = 1;
regel_y_af = 2;
}
}
start_magnifier();
</script>