Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 117
Завершенные тесты: 1
1

Самодельная всплывающая подсказка неработает

20.07.2016, 19:54. Просмотров 276. Ответов 7

Уровень автора:любитель;

Изменил мою подсказу всплывающую,решил что таких будет много на странице,надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал.
mydiv - элемент на который навожу курсор
myimg - div который появляется.


Вот код
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div = document.getElementById('mydiv');           //неработает!
div.onmouseover = function(e) {
    
    doc = document.createElement("div");
    doc.style.visibility="visible";
    doc.className="div"; 
    div.appendChild(doc);
    doc.id="myimg";
    }
                                       
                                   
    div.onmouseout = function() {                                                 //Исчезновение
          s = document.getElementById("myimg");
          s.remove();
          
      }
HTML5
1
2
<img src="../Enchantress_icon.png" width="32" height="32" style="margin:10px 15px auto;" id="mydiv"/> <!-- элемент на который наводится курсор -->
<!-- сюда вставляется div -->
Это "плавающее окно" с абсолютным позиционированием,и з-индексом,поверх всех элементов,поэтому appendChild.
Уверен что что-то упускаю!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.07.2016, 19:54
Ответы с готовыми решениями:

Всплывающая подсказка
Здравствуйте! Подскажите. пожалуйста, как реализовать всплывающую подсказку...

Всплывающая подсказка на js
Испробовал css стили для всплывающих подсказок как на сайте...

Почему не работает всплывающая подсказка?
&lt;body&gt; &lt;my id=&quot;text1&quot; title=&quot;Всплывающая подсказка&quot;&gt;Текст&lt;/a&gt; &lt;script...

Всплывающая подсказка в виде img
Помогите подправить скрипт. Данный Скрипт выводит подсказки при наведении...

всплывающая подсказка когда курсор останавливается на участке
Есть ссылка. На событие onmouseover написан скрипт - появляется всплываюшая...

7
ironid
68 / 14 / 7
Регистрация: 17.10.2015
Сообщений: 53
20.07.2016, 21:19 2
вы не можете добавить ребенка img -у, вместо
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
div.appendChild(doc);
вставьте
Javascript
1
this.parentElement.appendChild(doc);
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
21.07.2016, 05:30 3
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал.
зачем создавать каждый раз?, при наведении показал, при уходе скрыл
и z-index не нужен, этот див и так поверх всех ляжет, позиционированные элементы всегда выше обычных элементов
если этот див прописать в самом конце html, то он будет и поверх других позиционированных элементов
0
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 117
Завершенные тесты: 1
21.07.2016, 06:56  [ТС] 4
создаю новое так как у меня таких много на странице и если наводил бы,то появлялись все div по всему сайту во всех местах,потому id у всех одинаковое. А так я создаю этот див когда навожу,привязываю стили к нему все,и делов то.
0
kalabuni
Нарушитель
3310 / 2623 / 629
Регистрация: 18.04.2012
Сообщений: 7,906
21.07.2016, 14:12 5
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
потому id у всех одинаковое
id по определению не может быть "у всех одинаковое"
id -- это как биометрический паспорт -- уникальный для конкретного человека
0
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 117
Завершенные тесты: 1
21.07.2016, 16:14  [ТС] 6
Тк функция автоматическая а неназванная я немогу передать В функцию параметр из html кода,знаю что можно сделать именнованую функцию,но она неработает на событие onmousemove Почемуто ,может кто то переписать мой код на основе моих утверждений?
0
kalabuni
Нарушитель
3310 / 2623 / 629
Регистрация: 18.04.2012
Сообщений: 7,906
21.07.2016, 17:20 7
существует два рациональных способа реализации множества всплывающих подсказок:
первый -- в HTML в тексте прописываются <span class="txt">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса
и сразу после каждого такого span'a прописывается<div class="tip">с текстом подсказки для предыдущего span'a</div>
в стилях классу .tip прописывается правило display: none
по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая следующий тег через nextSibling делает видимым, абсолютно спозиционированным и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор
функция, назначенная на событие onmouseout, делает последующий div снова невидимым
главный недостаток этого способа -- большой объём HTML-кода
к достоинствам следует отнести малый объём и простоту скрипта, а также лёгкость редактирования HTML-кода (потому как подстроки и подсказки к ним в коде находятся рядом

второй способ -- в HTML-коде в тексте прописываются <span class="txt" id="sN">подстроки, при наведении курсора на которые всплывает подсказка</span> с одним и тем же именем класса, но с разными уникальными идентификаторами
и в самом конце страницы прописывается один невидимый абсолютно спозиционированный <div id="tip"></div>
по загрузке страницы скриптом на все теги .txt на событие onmouseover "вешается" функция, которая единственный div в коде делает видимым и устанавливает ему нужные координаты left и top, исходя из координат тега span, на который наведён курсор и меняет внутреннее содержимое этого div, которое функция берёт из большого ассоциативного js-массива, где ключами являются id'ы тегов span, а значениями -- содержимое соответствующих подсказок
функция, назначенная на событие onmouseout, делает единственный div снова невидимым
главные недостатки этого способа -- большой объём js-кода и сложность редактирования кода (span'ы и js-массив разнесены в пространстве и связаны лишь значениями идентификаторов, в которых легко ошибиться)
к достоинствам следует отнести малый объём HTML-кода и простоту скрипта

------
вы же собираетесь реализовать свой собственный новый способ, при котором, хотите ли вы того или нет, вам также нужно будет конструировать js-массив с ключами и содержимым подсказок, но функция, которая будет обрабатывать onmouseover, будет перегружена совершенно ненужной процедурой создания нового контейнера для подсказки
уверяю вас -- это нерационально
выше вам посоветовали использовать описанный мною второй способ
прислушайтесь к совету
1
Сергей Мишин
0 / 0 / 1
Регистрация: 19.07.2016
Сообщений: 117
Завершенные тесты: 1
21.07.2016, 18:54  [ТС] 8
Спасибо за 2 способ!
0
21.07.2016, 18:54
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
21.07.2016, 18:54

Как сделать так, чтобы всплывающая подсказка не исчезала долгое время
если в документе есть ссылка с атрибутом title, то при наведении курсора на эту...

При наведении курсора на определённую позицию в заказе появляется всплывающая подсказка (по позиции)
В скрипте информация представляется в иерархической структуре (контракт – цех...

Неработает ajax
Помогите пожалуйста, я использую библиотеку jquery (пробовал и без нее) для...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru