Событие onmouseover
Событие onmouseover — это атрибут HTML-тегов, который применяется для вызова скрипта (напр. JavaScript) в том случае, когда курсор мыши попадает в зону элемента.
Тип события
Назначение: служит для вызова скриптов при возникновении определенного события на HTML-странице.
Применяется: в HTML 4.01 и XHTML к тегам <A>, <ABBR>, <ACRONYM>, <ADDRESS>, <AREA>, <B>, <BIG>, <BLOCKQUOTE>, <BODY>, <BUTTON>, <CAPTION>, <CENTER>, <CITE>, <CODE>, <COL>, <COLGROUP>, <DD>, <DEL>, <DFN>, <DIR>, <DIV>, <DL>, <DT>, <EM>, <FIELDSET>, <FORM>, <H1...H6>, <HR>, <I>, <IMG>, <INPUT>, <INS>, <KBD>, <LABEL>, <LEGEND>, <LI>, <LINK>, <MAP>, <NOFRAMES>, <NOSCRIPT>, <OBJECT>, <OL>, <OPTGROUP>, <OPTION>, <P>, <PRE>, <Q>, <S>, <SAMP>, <SELECT>, <SMALL>, <SPAN>, <STRIKE>, <STRONG>, <SUB>, <SUP>, <TABLE>, <TBODY>, <TD>, <TEXTAREA>, <TFOOT>, <TH>, <THEAD>, <TR>, <TT>, <U>, <UL>, <VAR>.
В HTML 5 событие onmouseover может использоваться практически со всеми тегами.
Все популярные браузеры понимают onmouseover даже у тех тегов, применение в которых этого события запрещено, а также у тех, которые вообще не входят в официальную спецификацию HTML.
Значения
Значением события onmouseover является код скрипта заключенный в двойные или одинарные кавычки, причем, если применяются двойные кавычки, то внутри тела скрипта можно указывать только одинарные и наоборот.
Значение по умолчанию: нет.
Синтаксис
<button onmouseout="скрипт">...</button>
<img src="URL" alt="текст" onmouseout="скрипт">
<div onmouseout="скрипт">...</div>Обязательный атрибут: нет.
Пример HTML: применение события onmouseover к тегу IMG
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тег IMG, событие onmouseover</title>
<style type="text/css">
p img {
width: 50px; /* ширина изображений внутри P */
height: 50px; /* их высота */
}
div {
width: 200px; /* ширина блока */
height: 200px; /* высота */
border: 1px #cc6633 solid; /* рамка */
}
</style>
<script type="text/javascript">
function img_change(src_img) {
var my_img = document.getElementById('image');
my_img.setAttribute('src',src_img);
}
</script>
</head>
<body>
<p>
<img src="images/cat.png" alt="Кошка" onmouseover="img_change(this.src)">
<img src="images/dog.png" alt="Собака" onmouseover="img_change(this.src)">
<img src="images/rabbit.png" alt="Кролик" onmouseover="img_change(this.src)">
</p>
<div><img id="image" src="#" width="200" height="200" alt=""></div>
</body>
</html>Поддержка версиями HTML
| Версия: | HTML 4.01 | HTML 5 | XHTML 1.0 | XHTML 1.1 |
| Поддержка: | Да | Да | Да | Да |
Поддержка браузерами
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |