Ноя
19
0

Joomla – подружим .png и IE?

Author K_E_V_in    Category Joomla     Tags , , , , , , , , , , , , , ,

  Для решения подобной задачи возьмем два файла: iepngfix.htc и blank.gif, они есть в архиве iepngfix.

iepngfi.htc применяет к указанному элементу фильтр, делающий прозрачным, а blank.gif – однопиксельное прозрачное изображение, если грубо, то оно убирает некрасивую границу по периметру нашего прозрачного png.

Предположим, что необходимо сделать прозрачным логотип на фоновом изображении. Пусть называется «mytmpl», он естественно располагается в директории шаблона «/templates/mytmpl», логотип «logo.png» соответственно в директории картинок шаблона «/templates/mytmpl/images/logo.png», все в файле «template_css.css», в директории css шаблона «/templates/mytmpl/css».

Последовательность действий такая:

  1. Скопировать «blank.gif» в директорию картинок шаблона
  2. Открыть «iepngfix.htc», найти в нем «var blankImg =» и изменить путь на путь до «blank.gif», в нашем случае «var blankImg = ‘/templates/mytmpl/images/blank.gif’;» и сохранить изменения
  3. Скопировать «iepngfix.htc» в директорию шаблона
  4. В CSS, к нужным элементам дописать свойство «behavior: url (‘<полный путь от корня до директории шаблона>iepngfix.htc’);» в нашем случае css логотипа будет выглядеть так:
    1
    2
    3
    4
    #logo {
    /* background: url(&#039;../images/logo.png&#039;) no-repeat; или в src картинки */
    behavior: url(&#039;/templates/mytmpl/iepngfix.htc&#039;);
    }

Вот и всё. Под конец несколько замечаний:

  • Путь до изображения из CSS указывается относительно директории с CSS файлом, либо от корня сайта
  • Следует избегать указание путей на файлы на своем домене, с указанием домена, так как при переезде/тестинге на локалке/доступа по IP, файлы будут недоступны. Это касается не только картинок.
  • Путь до «iepngfix.htc» необходимо указывать только полностью и только относительно корня сайта
  • При неправильном указании пути до «iepngfix.htc» эффекта прозрачности не будет
  • Путь до «blank.gif» можно указывать как от корня сайта, так и относительно индексного файла. То есть например в поддиректории типа «http://vshope.ru/supersite», в «http://vshope.ru/supersite/images», то в «iepngfix.htc» можно написать «var blankImg = ‘images/blank.gif’;»
  • При неправильном указании пути до «blank.gif» прозрачность будет, но вокруг png будут некрасивые рамки

По материалам: http://truetug.info/

Прокомментировать

Рубрики

Облако меток

На волнах твиттера

В прямом эфире