Событие onmousemove

23.09.2010

Влад Мержевич

Internet Explorer Chrome Opera Safari Firefox Android iOS

4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Описание

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

Синтаксис

onmousemove="скрипт"

Значения

Код скрипта

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

Нет.

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

Пример

HTML5IECrOpSaFx 6

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Событие onmousemove</title>
 <script>
 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