Приднестровская поддержка XOOPS
Одним из самых потрясающих дополнений версии 7 браузера Internet Explorer стала поддержка прозрачности изображений PNG. Как уже было сказано в главе 3 при обсуждении фоновых изображений, с помощью изображений в формате PNG действительно можно достичь прозрачности: их можно отображать поверх фона различных цветов без пиксельного гало-эффекта и использовать для создания визуальных эффектов с применением непрозрачных фоновых слоев. Однако если вы просто разместите такие изображения на странице, пользователи Internet Explorer 6 увидят непрозрачные картинки, как показано на рис. 7.5. Есть ли какой-нибудь способ обойти этот досадный недочет и подружить IE6 с PNG?
Рис. 7.5. Отображение прозрачных изображений PNG в Internet Explorer 6
Страницы тестировались в програме IETester в режиме IE6
Решение
Чтобы изображения в формате PNG отображались в Internet Explorer 6 прозрачными, придется использовать небольшой сценарий на Java-Script. Он был создан Аароном Будманом (Aaron Budman) и в дальнейшем доработан Дрю МакЛелланом (Drew McLellan) с тем, чтобы обеспечить поддержку фоновых изображений.
Прежде всего создадим прозрачный GIF размером 1×1 px и сохраним его под именем x.gif.
Затем создадим новый файл сценария на JavaScript (который будет предназначен только для Internet Explorer 6) и добавим в него следующий код:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
var bgsleight = function() {
function fnLoadPngs() {
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
for (var i = document.all.length - 1, obj = null; (obj = document.all[i]); i--) {
if (itsAllGood && obj.currentStyle.backgroundImage.match(/\.png/i) != null) {
fnFixPng(obj);
obj.attachEvent("onpropertychange", fnPropertyChanged);
}
if ((obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position == ''){
obj.style.position = 'relative';
}
}
}
function fnPropertyChanged() {
if (window.event.propertyName == "style.backgroundImage") {
var el = window.event.srcElement;
if (!el.currentStyle.backgroundImage.match(/x\.gif/i)) {
var bg = el.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
el.filters.item(0).src = src;
el.style.backgroundImage = "url(x.gif)";
}
}
}
function fnFixPng(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') mode = 'crop';
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
+ src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = "url(/img/shim.gif)";
}
return {
init: function() {
if (navigator.platform == "Win32" && navigator.appName ==
"Microsoft Internet Explorer" && window.attachEvent) {
addLoadEvent(fnLoadPngs);
}
}
}
}();
bgsleight.init();
Чтобы данный сценарий выполнялся только в Internet Explorer 6, его нужно добавить с помощью условных комментариев:
<!--[if IE 6]>
<script type="text/javascript" src="bgsleight.js"></script>
<![endif]-->
Если вы сохраните страницу на данном этапе и откроете ее в Internet Explorer, окажется, что фоновое изображение элемента div с идентификатором content исчезло. Его можно вернуть, задав ему свойство height.
Достаточно значения 1%, поскольку Internet Explorer 6 интерпретирует его как минимальный размер элемента и будет растягивать блок до тех пор, пока он не сможет вместить все вложенные элементы. Поскольку это правило стиля предназначено только для Internet Explorer, его нужно разместить либо внутри элемента style в заголовке head вашего документа, либо добавить в созданную специально для этого браузера таблицу стилей, привязанную к документу с помощью условных комментариев:
<!--[if IE 6]>
<style type=”text/css”>
#content {
height: 1%;
}
</style>
<script type=”text/javascript” src=”bgsleight.js”></script>
<![endif]-->
Обновите страницу в Internet Explorer, и вы увидите, что поверх фона будет отображаться прозрачная заливка, как показано на рис. 7.6.
Рис. 7.6. Отображение прозрачных изображений PNG в Internet Explorer 6
Обсуждение
Использование описанного приема может вызвать массу других неприятностей. Например, может возникнуть впечатление, будто некоторые области страницы покрыты фоновым изображением, делая ссылки недоступными для перехода, а поля для ввода текста – не принимающими фокус. Эту проблему чаще всего можно решить, добавив элементу описание position:relative;, однако это также усложняет нашу задачу. Тем не менее благодаря возможности использования полностью прозрачных изображений можно добиться большей гибкости дизайна, а если подходить к делу тщательно и аккуратно, все будет отлично работать.
Если у вас IE6, вы можете протестировать отображение прозрачных картинок, открыв страницу demo
Отправитель | Нити |
---|
3 пользователь(ей) активно (2 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 3 далее... |