Форум Сибири
21 Ноября 2017, 11:02:27 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   Начало   Помощь Поиск Войти Регистрация  
Страниц: [1]   Вниз
  Отправить эту тему  |  Печать  
Автор Тема: Универсальная всплывающая подсказка (HTML & CSS)  (Прочитано 11802 раз)
0 Пользователей и 1 Гость смотрят эту тему.
KenDrive
Администратор
Ветеран
*****

Репутация: +70/-0
Offline Offline

Город: Тюмень
Пол: Мужской
Сообщений: 960


Чебурген трудяга


WWW
« : 22 Сентября 2009, 16:03:16 »

Вам предлагается вариант всплывающей подсказки, с легкой претензией на универсальность для браузеров: FF (все из семейства Mozilla), OPERA, IE6(7), в других нет возможности проверить, экзотику не стоит брать в расчет.

Как сделать чтобы IE6 понимал свойство :hover, :active и :focus, легко!

Просто необходимо написать нижеследущее:
Код:
body {
  behavior: url("csshover3.htc");
}

Взять csshover3.htc можно здесь → http://www.xs4all.nl/~peterned/htc/csshover3-source.htc
И теперь IE6 полностью понимает :hover, :active и :focus как родные, пользуйтесь!

Решены, если не все, то основные проблемы и препятствия данного метода организации всплывающей подсказки, как оказалось в очень кривом браузере OPERA, речь идет не о функционале, а не адекватной поддержке CSS, чему было посвящено исследование предыдущего поста.

Теперь чуть более подробно, какие шаги необходимо сделать, чтобы с полной отдачей использовать предложенный метод. При наведение курсора мыши Чаще используйте возможности горячих клавиш, этим Вы экономите массу времени. Овладевайте слепой десяти пальцевой печатью на клавиатуре, есть огромное количество клавиатурных тренажеров. Практика и только практика поможет Вам в этом увлекательном процессе;-) на указатель всплывающей подсказки, появляется всплывающий слой несущий ту или иную информацию. В общем случае css/html выглядит приблизительно так:

Код:
css

<style type="text/css">
.tp {position:relative;text-indent:0;}
.tp b {
   border-bottom:#90f 1px dotted;
   color:#90f;
   cursor:help;
   font-weight:normal;
}
.tp b span {display:none;}
/*-- для FF, OPERA, IE7 --*/
.tp b:hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp b:hover span {
   background:lightcyan;
   border:silver 2px outset;
   color:#000;
   display:block;
   padding:7px;
   position:absolute;
   top:2px;
   left:5px;
   z-index:10;
   text-align:left;
   width:250px;
}
</style>

<!--[if IE 6]>
<style type="text/css">
body {
  behavior: url("csshover3.htc");
}
.tp b:hover {
   border-bottom:red 1px dotted;
   color:red;
}
.tp b:hover span {
   background:lightcyan;
   border:silver 2px outset;
   color:#000;
   display:block;
   padding:7px;
   position:absolute;
   top:2px;
   left:5px;
   z-index:10;
   text-align:left;
   width:250px;
}
</style>
<![endif]-->

html

<p class="tp" style="z-index:7;">
Просто текст<br>
<b>display:inline-block;<span style="left:130px;">
Это значение генерирует блочный элемент, который обтекается другими
элементами веб-страницы подобно встроенному элементу. Фактически
такой элемент по своему действию похож на встраиваемые элементы
(вроде тега <IMG>). При этом его внутренняя часть форматируется
как блочный элемент, а сам элемент — как встроенный.</span></b> -
еще не много текста.</p><br>

<p class="tp" style="z-index:6;">
Текст - много, много текста
<b>указатель<span style="left:150px;">всплывающий
слой</span></b>продолжение того о чем вы хотите сказать.</p>

Стили заданы по умолчанию, сокращение .tp от tooltips post.
Селектор {свойство1:аргументы;свойство2:аргументы;}

Меняя значения аргументов, вы можете настроить оформление указателя и всплывающего слоя по своему желанию. Позиционирование вплывающей подсказки производится в html это в основном касается z-index:XX; в параграфе и left:XXpx; top:XXpx; для <span>...</span>, есть возможность, внеся не большую коррекцию, улучшить читаемость текста всплывающей подсказки при отключенных стилях. Если, кому-то требуется, через комментарии, выложу описание.

Многие решения на JavaScript, часто используют для всплывающей подсказки "title" это с одной стороны все упрощает, а с другой стороны, нет возможности во всплывающем слое пользоваться ссылкой, в данном случае такая возможность имеется.

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

Источник: http://trifler.ru/blog/post_1177231326.html
Записан
Страниц: [1]   Вверх
  Отправить эту тему  |  Печать  
 
Перейти в:  

Чат России, общение и знакомства без регистрации | Бухгалтер оказывает бухгалтерские услуги в Тюмени
Форум АВТО ВАЗ LADA (project C) ВАЗ 2113, 2114, 2115 Powered by SMF 1.1.21 | SMF © 2006, Simple Machines | Sitemap
Яндекс цитирования