Embrace your dreams and prove your honor...
В общем-то, просто один момент из HTML, но не уверен, что все с этим знакомы, а момент полезный. Прошу прощения, если он уже публиковался - можете смело удалять.
Как сделать, чтобы при наведении на блок текста появлялось окно pop-up'а с текстом? Используйте атрибут title.
Например:
Можно пойти чуть дальше. В div с title'ом можно заключать не только голый текст, но и любые другие блоки или тэги, в том числе тэг more.
Как сделать, чтобы при наведении на блок текста появлялось окно pop-up'а с текстом? Используйте атрибут title.
Например:
Наведи на меня...
Можно пойти чуть дальше. В div с title'ом можно заключать не только голый текст, но и любые другие блоки или тэги, в том числе тэг more.
-
-
15.02.2011 в 06:44-
-
15.02.2011 в 07:08Насколько я знаю - нет. Только через комментарии... Но! Можно сделать это так:
а) Создаём запись, вписываем more, скрываем его отображение внутри записи (т.е. чтобы он был только в ленте, как сделать описано здесь).
б) Копируем этот more, публикуем запись.
в) Вставляем more в первый комментарий.
г) При необходимости - создаём якорь, ведущий к нему. О том, как делать якоря, на днях напишу.
Не идеально, разумеется, но лучше, чем ничего. Потом ещё поищу, что с этим можно сделать.
-
-
15.02.2011 в 07:29Я вообще хотела подобным образом скрывать гиф или что-то подобное))) А если оно будет в ленте...
создаём якорь, ведущий к нему. О том, как делать якоря, на днях напишу.
Буду ждать
-
-
15.02.2011 в 12:52Наведи на меня
А про якоря вот тут обсуждали. ИНтересно будет почитать еще варианты.
-
-
15.02.2011 в 14:59Интересно будет почитать еще варианты.
Не, это скука. Суть якоря ведь в том, чтобы страница не перезагружалась, верно? А сделать это через сам дайри нельзя (по крайней мере, ещё не нашёл, как), парсер дайри насильно вписывает во все ссылки target="_blank", что приводит к открытию новой страницы. Зато можно сделать через флэш.
Вообще, экспериментировал с якорями тут. Одно но - у платников страница всё равно будет обновляться (потому что фо флэше в ссылке прописано diary.ru, а там идёт pay.diary.ru) (чтобы протестить предлагаю платниками на время разлогиниться), т.е. рекомендуется применять только в дневниках \ сообществах с платными сервисами, у них url всегда вида diaryName.diary.ru/p*.htm. В идеале - надо как-то умудриться отследить через флэш текущий url, но с этим промучался уже прилично, а результата так и не получил - дошёл только до адреса iframe'а. А жаль, можно было бы сделать нормальную систему вписывания якорей в посты. Хотя так тоже можно, конечно, но она будет слегка кривой... Всё равно попробую сделать на днях.
Usagi-chan~
Нет, я не это имел ввиду под "скрывать". Well...
Верхний пост моего дневника. Отпишите, когда посмотрите, удалю его там.
-
-
15.02.2011 в 18:19-
-
15.02.2011 в 18:23-
-
15.02.2011 в 18:32Вообще, экспериментировал с якорями тут.
Ага, с бесплатного логина работает, с платного тупо перезагружает страничку. А так прикольно, с содержания сразу на нужное место поста попадать.
-
-
15.02.2011 в 18:42Ну да, пожалуй.
Ещё можно вложить через flash redirect страницу с прописанным блоком на скрытие (т.е. с имитацией more), но тут такой минус - реальный размер блока меняться не будет (т.е. вне зависимости от того, раскрыт ли блок, он будет занимать место, как будто раскрыт). Это можно посмотреть в эпиграфе моего днева ("пролог").
Души Романтиков
Нет, с платного он тоже должен переходить к нужной части поста, но при этом обновляя страницу, да.
Вообще, есть у меня идея, как это можно сделать (раз уж ввёл flash redirect). Сейчас попробую...
-
-
15.02.2011 в 18:46-
-
15.02.2011 в 18:54Хм, ну может быть. Что-нибудь из раздела "перейти после полной загрузки или попытаться перейти сразу, когда блок ещё не успел загрузиться". Я под Safari не тестил.
-
-
24.02.2011 в 20:21ps: цель - чтобы при наведении на картинку не показывался её адрес. пардон.
pps: спасибо, получилось!
-
-
24.02.2011 в 20:45В случае с картинками можно title вешать на сам img, тоже будет работать. Но и так интересно, спасибо.
-
-
18.03.2013 в 23:06Чтобы не текст при наведении вылезал, а картинка.
-
-
05.07.2013 в 08:17Прописываю код для картинки с всплывающей подсказкой:
По задумке должно получится так:
А получается вот так:
То же самое звездочка с всплывающей подсказкой:
Должно быть так:
А получается вот так:
И картинка и звёздочка самовольно опускаются на следующую строку, и следующий за ними текст скачет еще строкой ниже.
В чём ошибка?
-
-
21.07.2013 в 20:40Чтобы не текст при наведении вылезал, а картинка.
+1 было бы здорово, если б вы рассказали, как такое возможно)
-
-
21.07.2013 в 21:31Это возможно только с помощью CSS.
-
-
21.07.2013 в 21:54-
-
21.07.2013 в 22:11Только data-title у меня почему-то не сработал, появляется подсказка без текста, а вот title - да.
Код получается примерно такой:
.photo {display: inline-block; position: relative; }
.photo:hover::after {content: attr(title); position: absolute; left: 0; right: 0; bottom: 5px; height: 50px; z-index: 1; background: url('/userdir/1/8/2/8/1828072/77775037.png') no-repeat center; color: #000; text-align: center; font-family: Arial, sans-serif; font-size: 11px; padding: 20px 10px;}
Ну все это меняется, конечно, как хотите, отпозиционировать и оформить можно по-всякому, это я уже свою картинку вставила.
Картинку берете в класс, который задали, и прописываете title.
<div class="photo" title="Всплывающая надпись"><img src="картинка.jpg"></div>
или
<p class="photo" title="Всплывающая надпись"><img src="картинка.jpg"></p>
НО! Обычная всплывающая подсказка все равно всплывает
-
-
21.07.2013 в 22:15-
-
21.07.2013 в 22:18.photo {display: inline-block; position: relative; }
.photo:hover::after {content: 'Пример'; position: absolute; тут дальше всякие ваши красивости}, и не писать title, но тогда надпись забивается железно, если захотите к другой картинке применить, то это другой класс придется писать, например .photo1.
И так не так, и этак не этак, короче)))
-
-
21.07.2013 в 22:19-
-
21.07.2013 в 23:30англоязычного сайта
-
-
21.07.2013 в 23:33-
-
21.07.2013 в 23:36Я этот, как его... Не некропостер, а некрокомментор
-
-
22.07.2013 в 05:43лучше поздно, чем ...-
-
22.07.2013 в 08:13