|
Совместное использование 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