Координаты мыши внутри слоя (спецы по JS помогите с ошибкой)

197

outtime

27 ноября 2014, 10:45

637

Возникла задача на странице выводить меняющийся контент (текст + пиктограмма) в зависимости от того, где находится мышка (в пределах одного слоя).

То есть, имеется один слой ("управляющий"), под ним второй (где выводится контент).

И нужно в слое 2 вывести информацию, соответствующую сектору слоя 1 при наведении в этот сектор мыши. В "управляющем" слое 1 примерно 100 секторов, не соприкасающихся друг с другом.

Я так понял, решить эту задачу можно с помощью javascript + провести анализ переменных координат и соответственно этим координатам вывести нужный блок.

Но застопорился прямо на самом старте.

В JS я дуб дубом, знаю только основы, и пытаюсь понять работу готовых скриптов методом тыка.

Нашел работающий скрипт, от которого мне можно "плясать" дальше - но почему-то у меня он не работает даже в самой простейшей версии - вывести alert с координатами мыши внутри слоя при клике на этот слой.

Это не говоря уже о дальнейшем использовании этих координат и подборе соответствующего блока контента.

Где здесь я ошибся?

У меня алерт вообще не выскакивает почему-то.

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'/>
	<title>Координаты внутри слоя</title>
	
<style>
#sloy {   position: relative;   background: gray;   height: 100px; width:500px; }
</style>

<script type="text/javascript">
$("#sloy").click(function(e) {
  var offset = $(this).offset();
  var relativeX = (e.pageX - offset.left);
  var relativeY = (e.pageY - offset.top);
  alert("X: " + relativeX + "  Y: " + relativeY);
});
</script>

</head>

<body>

<div id="sloy"></div>

</body>
</html>

Предлагаю воспользоваться моими услугами корректора. Проверю и уберу все ошибки, поправлю грамматику и склонения, сделаю текст лучше и читабельнее. Высокая скорость работы, цена 20 р за 1000 символов.

ДП

203

Дикий пионер

27 ноября 2014, 10:53

#1

Оберните назначения обработчика события в


$(document).ready(function(){
//ваш код
});

потому что к моменту его выполнения элемента #sloy на странице еще нет.

Возвращаясь к вашей первоначальной задачи, я бы, наверно, сделал внутри управляющего слоя кучу емлких слоев и отлавливал событие вхождения мыши в каждый слой и менял при этом контент. Ибо если вы будете на движение мыши завязываться (mousemove) - то получите огромное количество событий и есть вероятность, что обработчик будет тормозить всю страницу. Впрочем, это не обязательно.

1

Карты Google предупредят, если SEO: почему мы делаем Яндекс о Rich Content

197

outtime

27 ноября 2014, 11:12

#2

Спасибо за помощь.

Простой исходник (тот что в первом сообщении) - всё равно не заработал 😂, но зато заработал тот вариант, который основной рабочий. Буду настраивать дальше.

VK приобрела 70% в структуре компании-разработчика red_mad_robot

Что делать, если ваша email-рассылка попала в спам