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

K_E_V_in    Joomla     html, IE, Joomla, PNG, Верстка, Работа с CMS, сайт, Шаблоны

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

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

Предположим, что необходимо сделать прозрачным логотип на фоновом изображении. Пусть шаблон называется «mytmpl», он естественно располагается в директории шаблона «/templates/mytmpl», логотип «logo.png» соответственно в директории картинок шаблона «/templates/mytmpl/images/logo.png», все CSS в файле «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('../images/logo.png') no-repeat; или в src картинки */ behavior: url('/templates/mytmpl/iepngfix.htc'); }

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

• Путь до изображения из 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/

Понравилась заметка? Поделись!