Припустим нам нужнен фон с прозрачной 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')";
-
}
-
}
-
Вставляем ПЕРЕД следующим 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;
-
}
Комментарии
Отправить комментарий