Совместное использование 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» необходимо проверить на правильность свой код. Например, если в содержимом константы присутствуют неэкранированные кавычки («), а перед обявлением функции может отсутствовать символ точки с запятой (;).


Добавление комментария:

 css.php