javascript redirect page

271

14 октября 2017, 20:37

Есть страничка с картинкой размером x на у пикселей. Если пользователь попал мышкой в область на картинке с координатами допустим x1+-10 на y1+-10 пикселей - его редиректит на другую страницу. Т.е. по попаданию в некоторую область редирект на другую страничку

Как это можно сделать?

Спасибо!

Answer 1

Можно так. (в снипеттах stackoverflow не работает только в браузере)

document.onmousemove = function(event){ 
if (event.clientX > 10 && event.clientY > 10){ 
location.href="https://google.com"; // ссылка 
} 
}

body { 
border:10px solid #fa0; 
height:calc(100vh - 40px); 
}

Answer 2

Вот примерно так. Дал 20px вместо 5 что бы здесь было легче увидеть работу скрипта.

$(document).ready(function(){ 
  $('.red_img').bind('mousemove',function(event){ 
    var img_left = $(this).offset().left+$(this).width()/2-50; 
    var img_top = $(this).offset().top+$(this).height()/2-50; 
    if(event.clientX > img_left && event.clientX < img_left +100 && event.clientY > img_top && event.clientY < img_top +100){ 
      console.log("ПОПАЛСЯ"); 
      //И редирект 
      //window.location = "http://www.yoururl.com"; 
    } 
     
  }); 
});

.red_img{ 
  border: 1px solid red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="cont"> 
  <img class="red_img" src ="http://301redirects.net/301-redirect.jpg" /> 
</div>