Er is geen CSS ondersteuning.
Met de meeste browsers kon je altijd lekker "knoeien" met javascript. Met de komst van google's Chrome is het echt uit met de pret. Dit bedoel ik uiterst positief, overigens. Het is heel erg prettig voor jouw bezoekers als jouw scripts foutloos en snel "draaien". Knoeiwerk is er niet meer bij en je moet echt jouw scripts door JSLint "heenhalen" om cross-browser te blijven.
De procedure om plaatjes te "pannen" is eigenlijk heel simpel. Maar om alle browsers
tevreden te houden zijn fouten absoluut niet toegestaan. Ook het "vergeten" van
code is uitgesloten. Voor Chrome is er zelfs in de body-begin-tag een onmousemove-statement
toegevoegd om alles naar behoren te laten werken. Om de image-panner op jouw website
te gebruiken kan je de code van de panning-procedure naar jouw webruimte kopieren en
gebruiken wat je nodig hebt om een pan-plaatje ergens te plaatsen.
Helemaal onderin het javascript staat de variabele "zoomfactor" (met de waarde: 2.5).
Met deze variabele kan je aangeven hoe groot het pan-effect is ten opzichte van
de afmetingen van het zichtbare gedeelte van het plaatje. Kijk even in de CSS en
de broncode hoe het op deze pagina gedaan is.
De image panning procedure is foutloos voor wat betreft het javascript en de html5 (W3C-validator). De CSS kan natuurlijk niet valideren door de opacity-statements. Maar als je de desbetreffende regels verwijderd zal de css natuurlijk ook "in het groen staan".
Hieronder staat het stukje html wat de plaatjes op deze pagina laat "pannen":
<div id="pan-plaatje" > <img src="http://static.dns5.nl/pan.jpg" alt="pan plaatje" width="802" height="602" /> </div> <div id="klein-plaatje" > <img src="http://static.dns5.nl/pan.jpg" alt="pan plaatje" width="80" height="60" /> </div>
Gevolgd door het javascript wat de pan-procudure "doet":
<script>
/*global window: false */
var type,z,z1,key,nieuwbreed,nieuwhoog;
function zoem(o) {
var par = document.getElementById(o.eenidee);
this.img = par.getElementsByTagName('IMG')[0];
this.xgegevens = [this.regelen(this.img, 'width'), this.regelen(this.img, 'height'), this.regelen(par, 'width'), this.regelen(par, 'height')];
this.eenarray = [1];
this.voegeventtoe(this.img, 'mousedown', 'gaomlaag', this.img);
this.voegeventtoe(par, 'mousemove', 'schuiven');
this.voegeventtoe(document, 'mouseup', 'msomhoog');
if (o.hetthumbje) {
this.initduim(o.hetthumbje);
}
this.zoom(typeof(o.zoomfactor) == 'number' ? o.zoomfactor: 0);
}
zoem.prototype = {
zoom: function(ud) {
if (ud > 1) {
this.eenarray[this.eenarray.length] = this.eenarray[this.eenarray.length - 1] * ud;
} else if (this.eenarray.length > 1) {
this.eenarray.length--;
}
z = this.eenarray[this.eenarray.length - 1];
nieuwbreed = this.xgegevens[0] * z;
nieuwhoog = this.xgegevens[1] * z;
z = nieuwbreed / this.img.width;
this.werker(this.img, {
left: (this.regelen(this.img, 'left') - this.xgegevens[2] / 2) * (z) + this.xgegevens[2] / 2 + 'px',
top: (this.regelen(this.img, 'top') - this.xgegevens[3] / 2) * (z) + this.xgegevens[3] / 2 + 'px',
width: nieuwbreed + 'px',
height: nieuwhoog + 'px'
});
this.minimaxi();
if (this.pan) {
this.pannetje();
}
},
minimaxi: function() {
var w = this.regelen(this.img, 'width'),
h = this.regelen(this.img, 'height');
this.werker(this.img, {
left: Math.min(Math.max(this.regelen(this.img, 'left'), this.xgegevens[2] - w), 0) + 'px',
top: Math.min(Math.max(this.regelen(this.img, 'top'), this.xgegevens[3] - h), 0) + 'px',
width: Math.max(this.xgegevens[0], w) + 'px',
height: Math.max(this.xgegevens[1], h) + 'px'
});
},
gaomlaag: function(ev, obj) {
document.onselectstart = function(event) {
window.event.returnValue = false;
};
this.lastXY = [ev.clientX, ev.clientY];
this.drag = obj;
this.pos = [this.regelen(this.drag, 'left'), this.regelen(this.drag, 'top')];
if (!window.event) {
ev.preventDefault();
}
return false;
},
schuiven: function(ev) {
if (this.drag) {
var muise = [ev.clientX, ev.clientY];
this.pos = [this.pos[0] + muise[0] - this.lastXY[0], this.pos[1] + muise[1] - this.lastXY[1]];
this.werker(this.drag, {
left: this.pos[0] + 'px',
top: this.pos[1] + 'px'
});
this.lastXY = muise;
if (this.drag == this.pan) {
this.depann();
} else {
this.minimaxi();
if (this.pan) {
this.pannetje();
}
}
}
if (!window.event) {
ev.preventDefault();
}
return false;
},
msomhoog: function(ev) {
this.drag = false;
if (!window.event) {
ev.preventDefault();
}
document.onselectstart = null;
},
voegeventtoe: function(o, t, f, p) {
var oop = this;
if (o.addEventListener) {
o.addEventListener(t,
function(e) {
return oop[f](e, p);
},
false);
} else if (o.attachEvent) {
o.attachEvent('on' + t,
function(e) {
return oop[f](e, p);
});
}
},
werker: function(ele, style, par) {
if (typeof(ele) == 'string') {
ele = document.createElement(ele);
}
for (var key in style) {
if (style.hasOwnProperty(key)) {
ele.style[key] = style[key];
}
}
if (par) {
par.appendChild(ele);
}
return ele;
},
regelen: function(obj, p) {
if (obj.currentStyle) {
return parseInt(obj.currentStyle[p.replace(/-/g, '')], 10);
}
return parseInt(document.defaultView.getComputedStyle(obj, null).getPropertyValue(p), 10);
},
initduim: function(o) {
var thumb = document.getElementById(o.eenidee);
if (thumb && o.eenborder) {
var w = this.regelen(thumb, 'width'),
h = this.regelen(thumb, 'height');
this.pan = this.werker('DIV', {
position: 'absolute',
overflow: 'hidden',
zIndex: '2',
visibility: 'hidden',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
thumb);
this.pan.className = o.eenborder;
this.panplaat = this.werker('IMG', {
position: 'absolute',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
this.pan);
this.panplaat.src = this.img.src;
this.tmask = false;
if (o.maskertje) {
this.tmask = this.werker('DIV', {
position: 'absolute',
zIndex: '1',
visibility: 'hidden',
left: '0px',
top: '0px',
width: w + 'px',
height: h + 'px'
},
thumb);
this.tmask.className = o.maskertje;
}
if (o.draggen) {
this.voegeventtoe(this.panplaat, 'mousedown', 'gaomlaag', this.pan);
this.voegeventtoe(thumb, 'mousemove', 'schuiven');
}
this.xgegevens[4] = w;
this.xgegevens[5] = h;
}
},
pannetje: function() {
var zlinks = this.xgegevens[4] / this.regelen(this.img, 'width') * this.regelen(this.img, 'left');
var top = this.xgegevens[5] / this.regelen(this.img, 'height') * this.regelen(this.img, 'top');
this.werker(this.pan, {
visibility: (this.eenarray.length > 1 ? 'visible': 'hidden'),
left: -zlinks + 'px',
top: -top + 'px',
width: this.xgegevens[4] * this.xgegevens[0] / this.regelen(this.img, 'width') + 'px',
height: this.xgegevens[5] * this.xgegevens[1] / this.regelen(this.img, 'height') + 'px'
});
this.werker(this.panplaat, {
left: zlinks + 'px',
top: top + 'px'
});
if (this.tmask) {
this.werker(this.tmask, {
visibility: (this.eenarray.length > 1 ? 'visible': 'hidden')
});
}
},
depann: function() {
var zlinks = Math.max(Math.min(this.xgegevens[4] - this.regelen(this.pan, 'width'), this.regelen(this.pan, 'left')), 0);
var top = Math.max(Math.min(this.xgegevens[5] - this.regelen(this.pan, 'height'), this.regelen(this.pan, 'top')), 0);
this.werker(this.pan, {
left: zlinks + 'px',
top: top + 'px'
});
this.werker(this.panplaat, {
left: -zlinks + 'px',
top: -top + 'px'
});
this.werker(this.img, {
left: -zlinks * this.regelen(this.img, 'width') / this.xgegevens[4] + 'px',
top: -top * this.regelen(this.img, 'height') / this.xgegevens[5] + 'px'
});
this.minimaxi();
}
};
var zoem1;
function beginnenmaar() {
zoem1 = new zoem({
eenidee: 'pan-plaatje',
zoomfactor: 2.5,
hetthumbje: {
eenidee: 'klein-plaatje',
eenborder: 'pannetje',
maskertje: 'masker',
draggen: true
}
});
}
beginnenmaar();
</script>
En tot slot de body-start-tag die nodig is om chrome ook correct plaatjes te laten pannen:
<body onmousemove="window.event.returnValue=false;">
Ik was bijna de css vergeten...
Alsnog hieronder:
<style type="text/css">
#pan-plaatje{
position:absolute;
overflow:hidden;
left:100px;
width:400px;
height:300px;
border:solid #050 1px;
cursor:move}
#pan-plaatje img{
position:absolute;
left:0px;
top:0px;
width:400px;
height:300px}
#klein-plaatje{
position:relative;
left:450px;
top:-10px;
z-Index:2;
overflow:hidden;
width:80px;height:60px;
border:solid #aaffaa 1px}
.pannetje{
border:solid #aaffaa 1px}
.masker{
color:#fff;
background:#99FF99;
opacity:.4;
filter:alpha(opacity=40);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"}
</style>
cache 02-01-2011