Вывод DIV при наведении на DIv )

[wayzer]

Здравствуйте, у меня вот такая проблема, искал много, но не нашел, точнее не смог понять, в найденном... Прошу пожалуйста помогите, мне нужен пример кода, чтобы при наведении курсора мышки на 1 DIV, в другом выводился заданный html код, прошу пожалуйста подсобите с разъяснением.

[lord2kim]

wayzer,

<div id="id1" style="width: 100px; height: 100px; background-color: green">наведи на меня</div><div id="id2"></div>
<script>
var id1 = document.getElementById("id1"), id2 = document.getElementById("id2"); // обращение к первому и второму div-ам по идентификатору
id1.onmouseover = function () { // событие (функция) по наведению мыши на первый div
    id2.innerHTML = "заданный <b>html</b> код"; // innerHTML задает html-код (в данном случае второму div-у)
}

id1.onmouseout = function () { // событие по уходу с элемента мыши
    id2.innerHTML = ""; // убираем текст со второго div-a
}
</script>

[wayzer]

Огромное спасибо.

[wayzer]

Извините, но сколько не ломал голову, не могу заставить вывод работать с переменными, мне нужно чтобы, например: в текстовом поле было введено число "А", и при наведении он выводил число "А".

[lord2kim]

wayzer,

<input type="text" id="txt" value="A">
<div id="id1" style="width: 100px; height: 100px; background-color: green">наведи на меня</div><div id="id2"></div>
<script>
var id1 = document.getElementById("id1"), id2 = document.getElementById("id2"); // обращение к первому и второму div-ам по идентификатору
id1.onmouseover = function () { // событие (функция) по наведению мыши на первый div
    id2.innerHTML = "<b>"+document.getElementById("txt").value+"</b>"; // innerHTML задает html-код (в данном случае второму div-у)
}
 
id1.onmouseout = function () { // событие по уходу с элемента мыши
    id2.innerHTML = ""; // убираем текст со второго div-a
}
</script>

[wayzer]

Спасибо!!!

[wayzer]

Последний вопрос, понимаю что уже выношу мозг, но как же сохранить это значение, если например при выборе в select, поля пропадают(выводится другой html код в который заменяет поле), при наведении больше нечего не показывает, а есть ли вариант сохранить куда-либо значение (не на сервере) и выводить его до повторного вывода поля и смены значения в нем ?

[lord2kim]

wayzer, каждый раз при наведении на div сохранять соответствующее значение из поля, если таковое видимо на странице, в переменную
если поле скрыто (например, display: none или какой-то блок, который должен содержать это поле пуст [не содержит его]), то выводить значение из переменной, иначе снова брать значение из этого поля...
P.S.: работает без перезагрузки страницы...иначе нужно будет записывать в cookie

[wayzer]

Сделал так и теперь при наведении на див, в поле с ид lvl значение приравнивается к "", то бишь все стирается...

if (document.getElementById("lvl").value=" ")

{
view.innerHTML = a;
}

else
{
a = document.getElementById("lvl").value;
view.innerHTML = a; // innerHTML задает html-код (в данном случае второму div-у)
}

[wayzer]

Все, спасибо за идею, разобрался.
Если кому понадобиться, то я сделал вот так (подсчет по кол-ву символов, то есть, если у нас в поле меньше 1 символа, то переменная не обновляется, если же больше, то обновляется и выводится).

if (document.getElementById("lvl").value.length<1) /// Кол-во символов.

{
view.innerHTML = a;
}

else
{
a = document.getElementById("lvl").value;
view.innerHTML = a; // innerHTML задает html-код (в данном случае второму div-у)
}