Ознакомьтесь с нашей политикой обработки персональных данных
23:37 

Pop-ups

D Ash
Embrace your dreams and prove your honor...
В общем-то, просто один момент из HTML, но не уверен, что все с этим знакомы, а момент полезный. Прошу прощения, если он уже публиковался - можете смело удалять.

Как сделать, чтобы при наведении на блок текста появлялось окно pop-up'а с текстом? Используйте атрибут title.

Например:

Наведи на меня...



Можно пойти чуть дальше. В div с title'ом можно заключать не только голый текст, но и любые другие блоки или тэги, в том числе тэг more.



@темы: Всплывающие подсказки, Дневник, Записи, Новая запись, Редактирование записи, Теги оформления записи

Комментарии
2011-02-15 в 06:44 

Хочу обхватить руками невинную шейку и почувствовать хруст. Аминь. ©
D Ash, Спасибо) А вы не в курсе, как-нибудь возможно прятать под кат текст именно внутри записи?

2011-02-15 в 07:08 

D Ash
Embrace your dreams and prove your honor...
Usagi-chan~
Насколько я знаю - нет. Только через комментарии... Но! Можно сделать это так:

а) Создаём запись, вписываем more, скрываем его отображение внутри записи (т.е. чтобы он был только в ленте, как сделать описано здесь).
б) Копируем этот more, публикуем запись.
в) Вставляем more в первый комментарий.
г) При необходимости - создаём якорь, ведущий к нему. О том, как делать якоря, на днях напишу.

Не идеально, разумеется, но лучше, чем ничего. Потом ещё поищу, что с этим можно сделать.

2011-02-15 в 07:29 

Хочу обхватить руками невинную шейку и почувствовать хруст. Аминь. ©
D Ash, Создаём запись, вписываем more, скрываем его отображение внутри записи
Я вообще хотела подобным образом скрывать гиф или что-то подобное))) А если оно будет в ленте...
создаём якорь, ведущий к нему. О том, как делать якоря, на днях напишу.
Буду ждать

2011-02-15 в 12:52 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Можно и так сделать:

Наведи на меня




А про якоря вот тут обсуждали. ИНтересно будет почитать еще варианты.

2011-02-15 в 14:59 

D Ash
Embrace your dreams and prove your honor...
Души Романтиков
Интересно будет почитать еще варианты.
Не, это скука. Суть якоря ведь в том, чтобы страница не перезагружалась, верно? А сделать это через сам дайри нельзя (по крайней мере, ещё не нашёл, как), парсер дайри насильно вписывает во все ссылки target="_blank", что приводит к открытию новой страницы. Зато можно сделать через флэш.

Вообще, экспериментировал с якорями тут. Одно но - у платников страница всё равно будет обновляться (потому что фо флэше в ссылке прописано diary.ru, а там идёт pay.diary.ru) (чтобы протестить предлагаю платниками на время разлогиниться), т.е. рекомендуется применять только в дневниках \ сообществах с платными сервисами, у них url всегда вида diaryName.diary.ru/p*.htm. В идеале - надо как-то умудриться отследить через флэш текущий url, но с этим промучался уже прилично, а результата так и не получил - дошёл только до адреса iframe'а. А жаль, можно было бы сделать нормальную систему вписывания якорей в посты. Хотя так тоже можно, конечно, но она будет слегка кривой... Всё равно попробую сделать на днях.

Usagi-chan~
Нет, я не это имел ввиду под "скрывать". Well...
Верхний пост моего дневника. Отпишите, когда посмотрите, удалю его там.

2011-02-15 в 18:19 

Хочу обхватить руками невинную шейку и почувствовать хруст. Аминь. ©
D Ash, Спасибо, я понял)))

2011-02-15 в 18:23 

Хочу обхватить руками невинную шейку и почувствовать хруст. Аминь. ©
D Ash, Но тут проще поставить ссылку на сам комметарий, чем пользоваться тегом MORE

2011-02-15 в 18:32 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Суть якоря ведь в том, чтобы страница не перезагружалась, верно?
:yes::yes:
Вообще, экспериментировал с якорями тут.
Ага, с бесплатного логина работает, с платного тупо перезагружает страничку. А так прикольно, с содержания сразу на нужное место поста попадать.

2011-02-15 в 18:42 

D Ash
Embrace your dreams and prove your honor...
Usagi-chan~
Ну да, пожалуй.
Ещё можно вложить через flash redirect страницу с прописанным блоком на скрытие (т.е. с имитацией more), но тут такой минус - реальный размер блока меняться не будет (т.е. вне зависимости от того, раскрыт ли блок, он будет занимать место, как будто раскрыт). Это можно посмотреть в эпиграфе моего днева ("пролог").

Души Романтиков
Нет, с платного он тоже должен переходить к нужной части поста, но при этом обновляя страницу, да.
Вообще, есть у меня идея, как это можно сделать (раз уж ввёл flash redirect). Сейчас попробую...

2011-02-15 в 18:46 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
D Ash, неа, не переходит, просто обновляет, м.б. от браузера зависит (я пробовала с Safari).

2011-02-15 в 18:54 

D Ash
Embrace your dreams and prove your honor...
Души Романтиков
Хм, ну может быть. Что-нибудь из раздела "перейти после полной загрузки или попытаться перейти сразу, когда блок ещё не успел загрузиться". Я под Safari не тестил.

2011-02-24 в 20:21 

Niaka
Будьте реалистами — требуйте невозможного.

ps: цель - чтобы при наведении на картинку не показывался её адрес. пардон.

pps: спасибо, получилось!:smiletxt:

2011-02-24 в 20:45 

D Ash
Embrace your dreams and prove your honor...
Niaka
В случае с картинками можно title вешать на сам img, тоже будет работать. Но и так интересно, спасибо.

2013-03-18 в 23:06 

Bluestreak
Ох, простите за некропостинг, но может подскажете, как в этом окошке делать всплывающую картинку?
Чтобы не текст при наведении вылезал, а картинка.

2013-07-05 в 08:17 

Страна фей
Подскажите, что делаю не так...

Прописываю код для картинки с всплывающей подсказкой:


По задумке должно получится так:



А получается вот так:




То же самое звездочка с всплывающей подсказкой:


Должно быть так:



А получается вот так:




И картинка и звёздочка самовольно опускаются на следующую строку, и следующий за ними текст скачет еще строкой ниже.
В чём ошибка?

2013-07-21 в 20:40 

Андрэ Роувелл
We are from the stars
Ох, простите за некропостинг, но может подскажете, как в этом окошке делать всплывающую картинку?
Чтобы не текст при наведении вылезал, а картинка.


+1 было бы здорово, если б вы рассказали, как такое возможно)

2013-07-21 в 21:31 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
как в этом окошке делать всплывающую картинку?
Это возможно только с помощью CSS.

2013-07-21 в 21:54 

Андрэ Роувелл
We are from the stars
Тайя, которая душит романтиков, мм... а вы не могли бы рассказать? Пожалуйста :rolleyes:

2013-07-21 в 22:11 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Андрэ Роувелл, я попробовала по примерам, описанным здесь htmlbook.ru/blog/vsplyvayushchaya-podskazka-na-...
Только 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>

НО! Обычная всплывающая подсказка все равно всплывает :(

2013-07-21 в 22:15 

Андрэ Роувелл
We are from the stars
Тайя, которая душит романтиков, спасибо большое! Будем пробовать и пытаться :hmm:

2013-07-21 в 22:18 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Чтобы обычная не всплывала, можно сделать так:

.photo {display: inline-block; position: relative; }
.photo:hover::after {content: 'Пример'; position: absolute; тут дальше всякие ваши красивости}, и не писать title, но тогда надпись забивается железно, если захотите к другой картинке применить, то это другой класс придется писать, например .photo1.

И так не так, и этак не этак, короче)))

2013-07-21 в 22:19 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Андрэ Роувелл, найдете, как убрать обычный всплыв, пишите!!!

2013-07-21 в 23:30 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Страна фей, дело в том, что p - это абзац, вот и переносится. Надо так:

англоязычного сайта


2013-07-21 в 23:33 

quirischa
администратор
(с капибарой на аватарке)
2013-07-21 в 23:36 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
quirischa, :-D

Я этот, как его... Не некропостер, а некрокомментор :-D

2013-07-22 в 05:43 

Страна фей
Тайя, которая душит романтиков, а я все вижу, спасибо что откликнулись лучше поздно, чем ... :cheek:

2013-07-22 в 08:13 

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Комментирование для вас недоступно.
Для того, чтобы получить возможность комментировать, авторизуйтесь:
 
РегистрацияЗабыли пароль?

@Дневники: секреты, тонкости и хитрости

главная