Помогите выиграть конкурс.
PNG-прозрачность в IE
Припустим нам нужнен фон с прозрачной png-шкой, а на нем розместить ссылку.
Делаем так:
<div class="button_bg"><a href="адресс ссылки">Ссылка</a></div>
А в css стиль добавляем:
- .button_bg{
- background: url("botton_menu.png") no-repeat;
- width: 243px;
- height: 34px;
- padding-left: 15px;
- padding-top: 5px;
- }
- .button_bg A { position: relative; } // без этого в ИЕ не работают ссылки
- * html .button_bg{
- background: none;
- filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="botton_menu.png");
- }
Вот второй способ (более практичный):
Достигается на самом деле довольно-таки легко. Берем прозрачный png, берем следующий код:
- <script type="text/javascript">
- function fixPNG(element)
- {
- //Если браузер IE версии 5.5-6
- if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
- {
- var src;
- if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
- {
- if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
- {
- src = element.src;
- element.src = "/blank.gif"; //заменяем изображение прозрачным gif-ом
- }
- }
- else //иначе, если это не картинка а другой элемент
- {
- //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
- src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
- if (src)
- {
- src = src[1]; //берем из значения свойства background-шmage только адрес картинки
- element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
- }
- }
- //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
- if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
- }
- }
- </script>
Вставляем ПЕРЕД следующим html:
<div style="background: url(some.png) no-repeat;" class="someclass"><a href="#">Ссылка</a></div>
Или таким, если png вставляется не бекграундом:
<div class="someclass"><img src="some.png"/></div>
Остается добавить в css следющее:
- .someclass {
- filter:expression(fixPNG(this));
- }
Создайте изображение размеров в 1 пиксель с именем "blank.gif" и сохраните в той же дериктории что и страица.
Все, теперь png во всех браузерах прозрачная!
Остается добавить – что если сверху png присутствуют какие-либо ссылки, или интерактивные поля (формы и т.п.), то они будут ниже картинки и не кликабельны, решается это просто, добавляется объекту, который нужно поставить выше position: relative;
На данном примере это выглядит так:
- .someclass a {
- position: relative;
- }