Событие onmousemove

Internet Explorer				Chrome				Opera				Safari				Firefox
6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	9.2	9.6	10.0	11.0	2.0	3.1	4.0	5.0	3.0	4.0	5.0	6.0

Описание

Событие onmousemove используется для определения перемещения курсора мыши в любом направлении экрана. Это событие применяется для создания различных эффектов, связанных с курсором мыши: всплывающие подсказки, перетаскивание объектов и др.

Синтаксис

onmousemove="скрипт"

Значения

Код скрипта

Значение по умолчанию

Нет.

Применяется к тегам

Пример

HTML 4.01IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Событие onmousemove</title>
  <script type="text/javascript">
   function mouseCoords(e) {
    // Для браузера IE
    if (document.all)  { 
      x = event.x + document.body.scrollLeft; 
      y = event.y + document.body.scrollTop; 
    // Для остальных браузеров
    } else {
      x = e.pageX; // Координата X курсора
      y = e.pageY; // Координата Y курсора
    }
    document.getElementById("coords").innerHTML = "X : " + x + ", Y : " + y;
   }
  </script>
  <style type="text/css">
   html, body {
    height: 100%; /* Высота документа */ 
    margin: 0; /* Убираем оступы на странице */
   }
   #coords {
    background: #333; /* Цвет фона */
    color: #fff; /* Цвет текста */
    padding: 5px; /* Поля вокруг текста */
   }
</style>
</head>
<body onmousemove="mouseCoords(event)">
<div id="coords">&nbsp;</div>
</body>
</html>

В данном примере на странице выводятся текущие координаты курсора мыши (рис. 1).

Рис. 1

Рис. 1. Использование события onmousemove

Если вам понравились материалы сайта, вы можете поддержать сайт, купив справочник по HTML в формате CHM, в виде набора HTML-файлов или в формате PDF за 30 р.