Для Сайта

innerHTML и onMouseOver

This webpage has been robot translated, sorry for typos if any. To view the original content of the page, simply replace the translation subdomain with www in the address bar or use this link.

Совместное использование innerHTML и onMouseOver

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

<html>
<script type="text/javascript">
<!--
function change_desc() {
//desc.innerHTML="Поменяли содержимое абзаца с id='desc'"; не универсальный вариант
document.getElementById("desc").innerHTML="Поменяли содержимое абзаца с id='desc'";
}
-->
</script>

<p id="desc">Абзац с меняющимся текстом</p>
<a href="#" onMouseOver="change_desc()">Меняем текст</a>
</html>

Этот пример можно немного упростить, например, менять текст в абзаце на разные варианты и возвращать его в исходное состояние после убирания с него указателя мыши, используя заранее определенные строковые константы:

<html>
<script type="text/javascript">

<!--
default_text="Стандартный текст";
text1="Соответственно текст1";
text2="Соответственно текст2";
function change_desc(v) {
//desc.innerHTML="Поменяли содержимое абзаца с id='desc'"; не универсальный вариант
document.getElementById("desc").innerHTML=v;
}
-->
</script>
<p id="desc">Абзац с меняющимся текстом</p>
<!-- запускаем нашу микрофункцию с параметров в виде имени константы с текстами -->
<a href="#" onMouseOver="change_desc(text1)" onMouseOut="change_desc(default_text)">Меняем текст на 1-ый</a>
<a href="#" onMouseOver="change_desc(text2)" onMouseOut="change_desc(default_text)">Меняем текст на 2-ой</a>

</html>

Примечание:
Если при тестировании работы JavaScript FireBug выдает сообщение "'имя переменной, константы или функции' is not defined" необходимо проверить на правильность свой код. Например, если в содержимом константы присутствуют неэкранированные кавычки ("), а перед обявлением функции может отсутствовать символ точки с запятой (;).

Created/Updated: 25.05.2018

Back