Привет всем, прошу помочь в следующей ситуации, код работает во всех браузерах кроме ie8 должен получиться эффект стирания.
код расположенный в index.php
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
<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>
а вот собственно код фала
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
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";
}
