0

Привет всем, прошу помочь в следующей ситуации, код работает во всех браузерах кроме ie должен получиться эффект стирания.

код расположенный в index.php

[PHP]<div id="car-box">
<div class="block-in">
<script src="templates/beez_20/javascript/cleaning.js" type="text/javascript">
</script>
<div style='width:846px; height:446px; position:relative' padding-left: 10px' id='cover'
onmousemove='try {draw((event.offsetX||event.layerX), (event.offsetY||event.layerY))} catch(e) {}'
onmouseover='{X=0; Y=0}'></div>
<script type="text/javascript">
var dirty = new Image(), clean = new Image(), carsLoad=0;
//
clean.src = 'templates/beez_20/images/clean.png';
dirty.src = 'templates/beez_20/images/dirty.png';
d = 75; //
window.onload = initCanvas
</script>
<div class="legs"></div>
<div class="links">
<div style="padding: 10px;"></div>
<a href="javascript:clearAll()" class="make-clean"><span>Помыть</span></a>
<span style="padding-left: 10px;"> | </span>
<span style="padding-left: 10px;"></span>
<a href="javascript:blurAll()" class="make-dirty"><span>Испачкать</span></a>

</div></div>
</div><p/></center>[/PHP]


а вот собственно код фала

[JS]function el(id) {return document.getElementById(id)};
function initCanvas() {
X=0; Y=0; r=d/2;
var car = document.createElement('canvas');
car.height=el('cover').offsetHeight;
car.width=el('cover').offsetWidth;
if (car.getContext) {
ctx = car.getContext('2d');
ctx.strokeStyle=ctx.createPattern(clean, 'no-repeat');
ctx.fillStyle=ctx.createPattern(clean, 'no-repeat');
draw=function(x, y) {
ctx.lineWidth=1;
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
if ((X==0)&&(Y==0)) {X=x; Y=y; return;};
ctx.lineWidth=d;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(X, Y);
ctx.stroke();
ctx.closePath();
X=x; Y=y;
};
clearAll=function() {void(ctx.drawImage(clean, 0, 0))};
blurAll=function() {void(ctx.clearRect (0, 0, el('cover').offsetWidth, el('cover').offsetHeight))};
} else {
car = document.createElement('div');
clearAll=function() {car.innerHTML=''; car.style.background='url('+clean.src+')'};
blurAll=function() {car.innerHTML=''; car.style.background='url('+dirty.src+')'};
draw=function(x, y) {
var div = document.createElement('div');
div.className='arc';
div.style.left=x-r+"px";
div.style.top=y-r+"px";
div.style.width=d+"px";
div.style.height=d+"px";
div.style.backgroundPosition=(r-x)+"px "+(r-y)+"px";
el('car').appendChild(div);
}
}
el('cover').parentNode.insertBefore(car, el('cover'));
car.id='car';
car.style.position="absolute";
car.style.background='url('+dirty.src+')';
car.style.left=el('cover').offsetLeft+"px";
car.style.top=el('cover').offsetTop+"px";
car.style.width=el('cover').offsetWidth+"px";
car.style.height=el('cover').offsetHeight+"px";
}
[/JS]

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.