Тема: змінюємо img яка переміщається в точку натиску миші залеж. від х та у
Привіт всім. є 8 картинок на кожній з яких зображено по одній стрілка (напрямок руху картинки яка переміщається до кінцевої точки) приклад картинок прикріпив.
Ось в чому полягає задача:
Наприклад картинка в самому початку знаходить по кординатах (500, 250).
якщо ми мишкою кликаємо по координатах (500, 300) то під час переміщення картинку по цих координатах вона має відображатися у вигляді стрілки з напрямком переміщення ( стрілка вгору), якщо потім кликнемо по координатах (200, 100) то має відображатися стрілка яка показує на третю чверть....
ну ви короче поняли... Ось як я це хотів замутити:
<img id='pers' src='img/pers/1_1.png'/>
<script type="text/javascript">
var img = document.getElementById('pers');
var masImg = ["img/pers/1_1.png","img/pers/1_2.png","img/pers/1_3.png","img/pers/1_4.png","img/pers/1_5.png","img/pers/1_6.png","img/pers/1_7.png","img/pers/1_8.png"];
var imgPlay = 0;
document.documentElement.onclick = function(event)
{
$.ajax({
type: "POST",
url: "updateCoord.php",
data: { updateCoordX: event.clientX }
}).done(function(response)
{
//event.clientX - координати знаходження картинки по х;
//event.clientX - координати знаходження картинки по у;
//response.x - кінцеві координати переміщення картинки по х;
//response.y - кінцеві координати переміщення картинки по у;
if( event.clientX <= response.x && event.clientY <= response.y) {
$("img#pers").attr("src", masImg[1]);
}
if(event.clientX > response.x && event.clientY > response.y){
$("img#pers").attr("src", masImg[4]);
}
if(event.clientX <= response.x && event.clientY >= response.y){
$("img#pers").attr("src", masImg[3]);
}
if(event.clientX > response.x && event.clientY >= response.y){
$("img#pers").attr("src", masImg[6]);
}
$( "#pers" ).stop();
setPosition(img, event.clientX, event.clientY);
});
}
function setPosition(obj, x, y)
{
$( "#pers" ).animate({
left: x-20,
top: y-42,
}, 5000);
}
</script>відповідні картинки занесені в масив, а потім залежно від напрямку переміщення ми замінюємо картинку за допомогою attr(); тільки я ось не можу зрозуміти де я допустив помилку в обрахування напрямку тому що картинки не хочуть мінятися (міняються рідко і не відображають не вірний напрямок переміщення)