Вывод DIV при наведении на DIv )
Здравствуйте, у меня вот такая проблема, искал много, но не нашел, точнее не смог понять, в найденном... Прошу пожалуйста помогите, мне нужен пример кода, чтобы при наведении курсора мышки на 1 DIV, в другом выводился заданный html код, прошу пожалуйста подсобите с разъяснением.
|
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,
<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> |
Спасибо!!!:D
|
Последний вопрос, понимаю что уже выношу мозг, но как же сохранить это значение, если например при выборе в select, поля пропадают(выводится другой html код в который заменяет поле), при наведении больше нечего не показывает, а есть ли вариант сохранить куда-либо значение (не на сервере) и выводить его до повторного вывода поля и смены значения в нем ?
|
wayzer, каждый раз при наведении на div сохранять соответствующее значение из поля, если таковое видимо на странице, в переменную
если поле скрыто (например, display: none или какой-то блок, который должен содержать это поле пуст [не содержит его]), то выводить значение из переменной, иначе снова брать значение из этого поля... P.S.: работает без перезагрузки страницы...иначе нужно будет записывать в cookie |
Сделал так и теперь при наведении на див, в поле с ид lvl значение приравнивается к "", то бишь все стирается...
if (document.getElementById("lvl").value=" ") { view.innerHTML = a; } else { a = document.getElementById("lvl").value; view.innerHTML = a; // innerHTML задает html-код (в данном случае второму div-у) } |
Все, спасибо за идею, разобрался.
Если кому понадобиться, то я сделал вот так (подсчет по кол-ву символов, то есть, если у нас в поле меньше 1 символа, то переменная не обновляется, если же больше, то обновляется и выводится). if (document.getElementById("lvl").value.length<1) /// Кол-во символов. { view.innerHTML = a; } else { a = document.getElementById("lvl").value; view.innerHTML = a; // innerHTML задает html-код (в данном случае второму div-у) } |
Часовой пояс GMT +3, время: 23:02. |