This page has been robot translated, sorry for typos if any. Original content here.

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