Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Сергей Мишин
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
#1

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

20.07.2016, 19:54. Просмотров 253. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Самодельная всплывающая подсказка неработает (JavaScript):

Всплывающая подсказка - JavaScript
Здравствуйте! Подскажите. пожалуйста, как реализовать всплывающую подсказку которая открывает в своем окне другой html-файл при наведении.

Всплывающая подсказка на js - JavaScript
Испробовал css стили для всплывающих подсказок как на сайте http://htmlbook.ru/blog/vsplyvayushchaya-podskazka-na-css (имеется в виду самый...

Всплывающая подсказка в виде img - JavaScript
Помогите подправить скрипт. Данный Скрипт выводит подсказки при наведении курсора, Подсказка в виде текста. Но хотелось бы чтобы можно было...

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

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

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

7
ironid
68 / 14 / 4
Регистрация: 17.10.2015
Сообщений: 53
20.07.2016, 21:19 #2
вы не можете добавить ребенка img -у, вместо
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
div.appendChild(doc);
вставьте
Javascript
1
this.parentElement.appendChild(doc);
0
newJS
2395 / 1068 / 99
Регистрация: 23.06.2011
Сообщений: 3,329
21.07.2016, 05:30 #3
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
надо чтобы при наведении создавался div с классом,айди,и тп. а при отведении - исчезал.
зачем создавать каждый раз?, при наведении показал, при уходе скрыл
и z-index не нужен, этот див и так поверх всех ляжет, позиционированные элементы всегда выше обычных элементов
если этот див прописать в самом конце html, то он будет и поверх других позиционированных элементов
0
Сергей Мишин
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
21.07.2016, 06:56  [ТС] #4
создаю новое так как у меня таких много на странице и если наводил бы,то появлялись все div по всему сайту во всех местах,потому id у всех одинаковое. А так я создаю этот див когда навожу,привязываю стили к нему все,и делов то.
0
kalabuni
Нарушитель
3133 / 2482 / 443
Регистрация: 18.04.2012
Сообщений: 7,482
21.07.2016, 14:12 #5
Цитата Сообщение от Сергей Мишин Посмотреть сообщение
потому id у всех одинаковое
id по определению не может быть "у всех одинаковое"
id -- это как биометрический паспорт -- уникальный для конкретного человека
0
Сергей Мишин
0 / 0 / 0
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 1
21.07.2016, 16:14  [ТС] #6
Тк функция автоматическая а неназванная я немогу передать В функцию параметр из html кода,знаю что можно сделать именнованую функцию,но она неработает на событие onmousemove Почемуто ,может кто то переписать мой код на основе моих утверждений?
0
kalabuni
Нарушитель
3133 / 2482 / 443
Регистрация: 18.04.2012
Сообщений: 7,482
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 / 0
Регистрация: 19.07.2016
Сообщений: 115
Завершенные тесты: 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
Привет! Вот еще темы с ответами:

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

Неработает меню в IE - JavaScript
добрый день, я взял с 1 сайта меню, оно уже было в формате .js, в нем оно прекрасно работало и в опере и в файрфоксе и в ИЕ любой версии,...

Неработает ajax - JavaScript
Помогите пожалуйста, я использую библиотеку jquery (пробовал и без нее) для посылания ajax: $(document).ready(function(){ ...

неработает ajax в ie - JavaScript
вот таким методом пользуюсь function makeRequest(url){var http_request=false; if (window.XMLHttpRequest){ // Mozilla, Safari, ... ...


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

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

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