Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: картинку в title картинки
 
 автор: TavRoX   (17.10.2010 в 17:29)   письмо автору
 
 

вообщем есть картинка размером 20*20 пикселей. как сделат ьчтобы при наведении на нее всплывала типа как в случае title увеличеная картинка
чет найти немогу

  Ответить  
 
 автор: АЯ   (17.10.2010 в 18:02)   письмо автору
 
   для: TavRoX   (17.10.2010 в 17:29)
 

А чё тут искать?
Тултипы - они везде одинаковы. Что текст подсказки, что картинка увеличенная - технология одна и та же.

Картинка, которая "всплывёт", уже изначально имеется в HTML-коде, но только со стилями display: none и position: absolute. Сиречь её не видно и находится она в левом верхнем углу окна браузера.

По наведению на маленькую картинку первым делом вычисляются абсолютные координаты этой маленькой картинки (с учётом скролла тела документа) и полученные left и top (с учётом желаемого смещения) устанавливаются соответствующей большой картинке и она делается видимой.
Соответственно, по отведению мыши большая картинка снова делается невидимой.

  Ответить  
 
 автор: TavRoX   (17.10.2010 в 19:11)   письмо автору
 
   для: АЯ   (17.10.2010 в 18:02)
 

а пример кода можна?

  Ответить  
 
 автор: sl1p   (18.10.2010 в 02:46)   письмо автору
 
   для: TavRoX   (17.10.2010 в 19:11)
 

<style>
.tooltip { position: relative }
.tooltip img { display:none; position: absolute }
.tooltip:hover img { display: block; }
</style>
<a href="#" class="tooltip">Tooltip<img src="#"></a>

;)

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования