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

HTML+CSS+JavaScript

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

 

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

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

тема: Как сделана эта картинка?
 
 автор: Worldmen   (19.06.2007 в 18:58)   письмо автору
 
 

Увидел на форуме http://forum.techlabs.by в интерфейсе есть лупа, и при обновлении или переходе на другую страницу этот логотип всегда на месте. Я сохранил страницу, посмотрел. Там со стилями чего-то. Я в них еще слабый.
Может обьясните подробно как это происходит?

   
 
 автор: AlexSol   (19.06.2007 в 19:26)   письмо автору
 
   для: Worldmen   (19.06.2007 в 18:58)
 

по-моему обычная картинка.

   
 
 автор: ilyaILF   (19.06.2007 в 19:44)   письмо автору
 
   для: Worldmen   (19.06.2007 в 18:58)
 

Если вы правой клавишей мыши посмотрите на свойства этой картинки то вы увидите ее размеры (179x182) и название (http://forum.techlabs.by/i/i.gif) при этом ее "вес" составляет всего-лишь 43 Кб. Если вы сохраните эту картинку по правом у клику, то на вашей машине окажется рисунок размером (1px на 1px). Затем если вы откроете код, то вы увидите, что за отображение этого рисунка отвечает тег <img src=/i/i.gif id=logo width=179 height=182> у которого есть идентификатор id="logo" значит он используется в стилях для преобразования рисунка. Далее открываем по очереди прикрепленные файлы стилей и ищем данный идентификатор, а он находится в стилях <link type=text/css rel=stylesheet href=/css/menu.css> в нем же мы видим следующий код:

#logo {
position: absolute;
z-index: 333;
top: 117;
left: 1;
background:url('/i/logo.png') no-repeat; background-image:expression('none'); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/logo.png', sizingMethod='crop');
}
т.е. в данном случае используется фильтр для корректного отображения файла .png в IE 6 и более ранних версий. И если вы возьмете из последнего файла стилей "истинный" адрес картинки-лупы, то вы увидите ее в IE http://forum.techlabs.by/i/logo.png

   
 
 автор: Worldmen   (20.06.2007 в 09:49)   письмо автору
 
   для: ilyaILF   (19.06.2007 в 19:44)
 

Спасибо за очень подробное описание.
В описании есть опечатка : при этом ее "вес" составляет всего-лишь 43 Кб - а 43 байта
Получается рисунок не перерисовывается из-за того что он background:url('/i/logo.png')

Попробовал сохранить эту страницу и поработать с ней. В FireFoxe нормально, а в IE фон присутствует. Рисунок i.gif тоже есть , я понял он для того что бы фон небыл виден в IE.

   
 
 автор: ilyaILF   (20.06.2007 в 19:01)   письмо автору
 
   для: Worldmen   (20.06.2007 в 09:49)
 

Это происходит так и по этой причине http://www.sitysoft.com/modules/articles/item.php?itemid=26 а исчерпывающую информацию по-поводу каким образом с этим справляться вы найдете здесь http://support.microsoft.com/kb/294714/ru

   
Rambler's Top100
вверх

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