Разработка сайтов, создание сайтов
главная / Web-дизайн / Прозрачность картинок png, gif. Проблемы с IE6.

Прозрачность картинок png, gif. Проблемы с IE6.

Прозрачность картинок png, gif. Проблемы с IE6. что делать если нужно использовать прозрачную картинку в дизайне? Explorer не поддерживает png-формат.

gif-прозрачность однотонна. Хочется использовать png формат, который поддерживает более умную прозрачность, но, весит побольше gif'а. Да ещё и возникает проблема: IE6, как и IE5, png-формат не поддерживают.

Что же делать?

1. Тупо забить. Сейчас мало кто использует IE6, и не стоит оно, чтобы об этом заботиться... Лучше подумать о любимой.

2. Решить проблему. У меня до сих пор, например, IE6, которым я пользуюсь крайне редко.

И вот решение: с помощью java script (jquery) - см. здесь: andreaseberhard.de.

Чтобы png-фон стал прозрачным, заливаем себе 2 файла:

jquery-latest.pack.js (или другой jquery поновее);

jquery.pngFix.js.

Прописываем в путь к этим файлам.

<head>
...
<script type="text/javascript" src="jquery-latest.pack.js"></script>

<script type="text/javascript" src="jquery.pngFix.js"></script>
...
</head>

И активируем тоже в .

<head>
...
<script type=“text/javascript”>
$(document).ready(function(){
$(document).pngFix();
});
</script>

…
</head>

И все. Теперь png-image прозрачный в IE6 и в IE 5.5.

3. Другой способ - это flash. В swf-файле с прозрачным фоном, при настройке его публикации можно задать любой размер без потери качества, в отличие от png. Весит он мало, грузится быстро и с прозрачным фоном. А то, что не у всех в браузере включен flash, решается картинкой-заглушкой. Как раз тот прозрачный gif или png на крайний случай для тех, его усидят те, у кого не загрузится флешка.

В код вставки swf-файла в html прописываем прозрачный фон (wmode) и заглушку (img).

<object type=”application/x-shockwave-flash” data=”images/loco.swf” width=”425″ height=”368″>
<param name=”wmode” value=”transparent” />

<param name=”movie” value=”images/loco.swf” />
<img src=”images/loco.png” width=”425″ height=”368″ alt=”" />
</object>



Источник: eilur.ru
КОНТАКТЫ
г. Екатеринбург
info@vismech.ru


текущее:
Создание GIF-анимации с помощью Photoshop
Веб-дизайн в стиле McDonalds
5 лучших стратегий SEO

НОВОСТИ
2011 г., «VisMech.ru»