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