<script type="text/javascript">
<public:attach event="onpropertychange" onevent="propertyChanged()" />
Пример 2. Файл iepngfix.htc
Содержимое файла iepngfix.htc показано в примере 2.
<p><img src="op.png" alt="Северо-запад" width="155" height="219" class="opacity"></p>
behavior: url("iepngfix.htc"); /* Механизм для вызова скрипта */
background: #666; /* Цвет фона */
<style type="text/css">
<title>IE6, PNG и прозрачность</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Пример 1. Вывод прозрачного рисунка в формате PNG
Сам рисунок выводится как обычно, но к тегу <IMG> добавляем свой класс opacity, для которого в стилях указываем behavior: url("iepngfix.htc"). Атрибут behavior позволяет в стилях выполнять программы на языке JavaScript, оформленные в виде специального файла с расширением htc (пример 1).
Заметно, что в IE6 имеется паразитный фон, от которого и требуется избавиться. Для этой цели нам понадобится прозрачный однопиксельный рисунок в формате GIF и небольшая программа на JavaScript.
Рис. 2. Вид картинки в формате PNG-24 в остальных браузерах
Рис. 1. Вид картинки в формате PNG-24 в браузере IE6
На рис. 1 показано как выглядит картинка с прозрачностью в браузере Internet Explorer 6 (IE6), а на рис. 2 то же изображение в остальных браузерах. В частности, старшие версии IE уже корректно работают с PNG-24.
Благодаря наличию в PNG-24 встроенного альфа-канала, изображения в этом формате поддерживают до 256 уровней прозрачности. Это позволяет создавать истинные полупрозрачные картинки, а также плавные переходы от прозрачной области к непрозрачной. Однако браузер Internet Explorer 6 напрямую не поддерживает эту возможность и чтобы ее реализовать приходится прибегать к различным ухищрениям.
→ → → Как в браузере IE6 добавить рисунок с прозрачностью в формате PNG?Как в браузере IE6 добавить рисунок с прозрачностью в формате PNG?Метки:
Как в браузере IE6 добавить рисунок с прозрачностью в формате PNG? | Графика для Web
Комментариев нет:
Отправить комментарий