Здравствуйте. Есть скрипт в админке, который делает обрезку фотографий. Суть в том, что админка писалась много лет назад и писалась под ИЕ 6-7. Собственно, в режиме совместимости админка продолжает работать нормально. А вот в обычном режиме ИЕ 10-11 не правильно работает. Т.е. данные все передает и нормально сохраняет. А вот сама обрезка происходит криво.
Вот код.
<script language=JavaScript type="text/javascript">
function load_it() {
b_v=document.getElementById('body_show');
b_h=document.getElementById('body_hide');
if (b_h) b_h.style.display='none';
if (b_v) b_v.style.display='block';
var img_width = document.getElementById('mainpic_big').width;
var img_height = document.getElementById('mainpic_big').height;
document.getElementById('small1_main').height = img_height + 16;
document.getElementById('small1_main').width = img_width + 16;
setCropParams(img_width, img_height, 115, 86, 'small1');
setCrop(0, 0, img_width, img_height, 1, 1, 'small1');
function doSend() {
document.body.onbeforeunload = null;
saveCrop('small1');
saveCrop('small2');
saveCrop('big');
return true;
}
function doCancel() {
document.body.onbeforeunload = null;
document.forma.do_crop.value = 0;
}
Далее html картинки. Заливается картинка, поверх нее таблица, с которой и снимаются показатели координат для обрезки.
<table cellSpacing=0 cellPadding=0 border=0>
<tr><td>Маленькое изображение 1:</td></tr>
<tr>
<td>
<DIV id='msmall1' style="POSITION: absolute;">
<table id="small1_main" onmouseup="MouseUp('small1');" onmousemove="MouseMove('small1')" height=466 cellSpacing=0 cellPadding=0 width="353" border=0 style="filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80)">
<tr vAlign=bottom class="fontab">
<td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
<td id="small1_top" align=middle><img onmousedown="MouseDown('top','small1')" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_top_r.gif" width=8 onSelect="return false;"></td>
<td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
</tr>
<tr>
<td id="small1_left" align=right class="fontab"><img onmousedown="MouseDown('left','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_left_r.gif" width=8 onSelect="return false;"></td>
<td onmousedown="MouseDown('center','small1');" ondragstart="return false;" style="CURSOR: hand;border:1px solid #fff;"> </td>
<td id="small1_right" align=left class="fontab"><img onmousedown="MouseDown('right','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_right_r.gif" width=8 onSelect="return false;"></td>
</tr>
<tr vAlign=top class="fontab">
<td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
<td id="small1_bottom" align=middle><img onmousedown="MouseDown('bottom','small1');" ondragstart="return false;" style="CURSOR: hand" height=8 src="/includes/admin/images/crop_bottom_r.gif" width=8 onSelect="return false;"></td>
<td><img height=8 src="/includes/admin/images/dot.gif" width=1 border=0></td>
</tr>
</table>
</DIV>
<img id=mainpic_small1 src="^[$webpath]/^[$id]^[$ext]?^[$no_cache]" border=0 hspace=8 vspace=8>
</td>
</tr> </table>
И код tools.js
var what=new Array();
var pchanged=new Array();
d=document;
isIE=document.all && document.all.item;
isOpera=window.opera;
var mbutton=0;
var debug_on=false;
var catch_click=false;
function debug_out(s,p) {
el=document.getElementById('info');
if (el) {
if (p)
el.innerHTML=el.innerHTML+s;
else
el.innerHTML=s;
}
}
function saveevent(e,b) {
if (isIE) {
what[0]=e.x;what[1]=e.y;
} else {
what[0]=e.pageX;what[1]=e.pageY;
}
if (b!=-1) what[2]=b;
}
function ismousedown(e) {
if (isIE) {
e=window.event;
b=e.button;
} else {
b=e.which;
}
mbutton=b;
if (b!=2) b=1;
saveevent(e,b);
if (catch_click) click_event(what,mbutton,true)
mbutton=b;
}
function ismouseup(e) {
if (isIE) {
e=window.event;
mbutton=e.button;
} else {
mbutton=e.which;
}
saveevent(e,0);
if (catch_click) click_event(what,mbutton,false)
mbutton=0;
}
function catchMe(e) {
if (isIE) {
e=window.event;
b=e.button;
} else {
b=e.which;
}
if (b!=1) b=0;
mbutton=b;
saveevent(e,-1);
}
if document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP | Event.MOUSEMOVE);
document.onmousedown = ismousedown;
document.onmouseup = ismouseup;
document.onmousemove = catchMe;
document.ondragstart = new Function ( "return false;" );
//document.onselectstart = new Function ( "return false;" );
var CurrentSide = null;
var x0 = 0;
var y0 = 0;
var pobj=new Array();
var pwidth=0;
var pheight=1;
var pscale=2;
var pminwidth=3;
var pminheight=4;
function gpid(objid) {
el=objid.split("_");
if (el.length>1)
return el[el.length-1]
else
return 0;
}
function setCropParams(w, h, hs, ws, objid) {
pobj[objid]=new Array();
pobj[objid][pwidth]=w;
pobj[objid][pheight]=h;
pchanged[gpid(objid)]=false;
if (ws==hs)
pobj[objid][pscale]=0;
else
pobj[objid][pscale]=hs/ws;
pobj[objid][pminwidth]=ws;
pobj[objid][pminheight]=hs;
}
function setCrop(x1, y1, x2, y2, axisx, axisy, objid) {
if(x1 < 0) {
x1 = 0;
axisx=1;
}
if(x1 > (pobj[objid][pwidth]-8)) {
x1 = pobj[objid][pwidth]-8;
axisx=1;
}
if(y1 < 0) {
y1 = 0;
axisy=1;
}
if(y1 > (pobj[objid][pheight]-8)) {
y1 = pobj[objid][pheight]-8;
axisy=1;
}
if(x2 < 8) {
x2 = 8;
axisx=1;
}
if(x2 > pobj[objid][pwidth]) {
x2 = pobj[objid][pwidth];
axisx=1;
}
if(y2 < 8) {
y2 = 8;
axisy=1;
}
if(y2 > pobj[objid][pheight]) {
y2 = pobj[objid][pheight];
axisy=1;
}
nheight=y2-y1;
nwidth=x2-x1;
if (axisx && axisy && pobj[objid][pscale]!=0) {
if (nheight/nwidth>pobj[objid][pscale]) {
axisx=1;
axisy=0;
} else {
axisx=0;
axisy=1;
}
}
nheight=y2-y1;
nwidth=x2-x1;
if (axisx && pobj[objid][pscale]!=0) {
y1=y1+Math.round((nheight-pobj[objid][pscale]*nwidth)/2);
y2=y1+Math.round(pobj[objid][pscale]*nwidth);
}
nheight=y2-y1;
nwidth=x2-x1;
if (axisy && pobj[objid][pscale]!=0) {
x1=x1+Math.round((nwidth-nheight/pobj[objid][pscale])/2);
x2=x1+Math.round(nheight/pobj[objid][pscale]);
}
if (nheight<pobj[objid][pminheight]) nheight=pobj[objid][pminheight];
if (nwidth<pobj[objid][pminwidth]) nwidth=pobj[objid][pminwidth];
if (
(y1>=0) &&
(y2<=pobj[objid][pheight]) &&
(x1>=0) &&
(x2<=pobj[objid][pwidth]) &&
((y2-y1)>=pobj[objid][pminheight]) &&
((x2-x1)>=pobj[objid][pminwidth])
) {
l=d.getElementById(objid+'_left');
t=d.getElementById(objid+'_top');
r=d.getElementById(objid+'_right');
b=d.getElementById(objid+'_bottom');
if (isIE) {
l.style.pixelWidth=x1+8;
t.style.pixelHeight=y1+8;
r.style.pixelWidth = pobj[objid][pwidth]-x2+8;
b.style.pixelHeight = pobj[objid][pheight]-y2+8;
} else {
l.style.width=x1+8;
t.style.height=y1+8;
r.style.width = pobj[objid][pwidth]-x2+8;
b.style.height = pobj[objid][pheight]-y2+8;
}
if (isOpera) {
c=d.getElementById(objid+'_main');
if (c) c.id=objid+'_main';
}
}
}
function MouseDown(side, objid) {
CurrentSide = side;
x0 = what[0];
y0 = what[1];
}
function MouseUp(objid) {
CurrentSide = null;
x0=0;
y0=0;
}
function getCropX1(objid) {
l=d.getElementById(objid+'_left').style;
if (isIE)
x1 = l.pixelWidth - 8;
else
x1 = parseInt(l.width) - 8;
if(x1 < 0) x1 = 0;
return x1;
}
function getCropY1(objid) {
t=d.getElementById(objid+'_top').style;
if (isIE)
y1 = t.pixelHeight - 8;
else
y1 = parseInt(t.height) - 8;
if(y1 < 0) y1 = 0;
return y1;
}
function getCropX2(objid) {
r=d.getElementById(objid+'_right').style;
if (isIE)
x2 = pobj[objid][pwidth]-(r.pixelWidth - 8);
else
x2 = pobj[objid][pwidth]-(parseInt(r.width) - 8);
if(x2 > pobj[objid][pwidth]) x2 = pobj[objid][pwidth];
return x2;
}
function getCropY2(objid) {
b=d.getElementById(objid+'_bottom').style;
if (isIE)
y2 = pobj[objid][pheight]-(b.pixelHeight - 8);
else
y2 = pobj[objid][pheight]-(parseInt(b.height) - 8);
if(y2 > pobj[objid][pheight]) y2 = pobj[objid][pheight];
return y2;
}
function MouseMove(objid) {
if((CurrentSide == null) || (what[2] != 1)) return;
dx = what[0] - x0;
dy = what[1] - y0;
x0 = what[0]; y0 = what[1];
if (debug_on) debug_out(CurrentSide+'['+dx+':'+dy+'] '+what[0]+' '+what[1]+' '+what[2]+'--'+mbutton);
x1=getCropX1(objid);
y1=getCropY1(objid);
x2=getCropX2(objid);
y2=getCropY2(objid);
pchanged[gpid(objid)]=true;
switch (CurrentSide) {
case "top":
setCrop(x1, y1+dy, x2, y2, 0, 1, objid);
break;
case "bottom":
setCrop(x1, y1, x2, y2+dy, 0, 1, objid);
break;
case "left":
setCrop(x1+dx, y1, x2, y2, 1, 0, objid);
break;
case "right":
setCrop(x1, y1, x2+dx, y2, 1, 0, objid);
break;
case "center":
setCrop(x1+dx, y1+dy, x2+dx, y2+dy, 0, 0, objid);
break;
}
}
Может кто подсказать, что именно не так? Обрезка (именно отображение и функционал обрезки) работает криво во всех современных браузерах. Может быть есть какие-то устаревшие элементы, которые я не вижу?
Спасибо за помощь.
