13 августа 2007 в 16:28
Здравствуйте! Поделитесь пожалуста опытом использования прозрачных png в Друпале для IE
Мой неудачный опыт:
Версия Друпаля 5.2
Использую хак для ИЕ :
http://dean.edwards.name/IE7/
Согласно правилу переименовал свои png-шки в *-trans.png
Вставил в page.tpl.php
...
<?php print $scripts; ?>
<!--[if lt IE 7]>
<script src="="<?php print base_path() . path_to_theme() ?>/ie7/ie7-core.js" type="text/javascript"></script>
<script src="="<?php print base_path() . path_to_theme() ?>/ie7/ie7-graphics.js" type="text/javascript"></script>
<[endif]-->
....
png используется так
#block-uc_cart-0 h2
{
display:block;
background: url(images/cart-trans.png) bottom no-repeat;
width:106px;
height:160px;
}
И никакого эффекта ...
Комментарии
"Не читайте на завтрак пролетарских газет"
В CSS
div.myname {width: 90px; height: 100px; background: url(pict/menu01.png) no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=pict/menu01.png,sizingMethod=crop); //background: none;}В HTML:
<div class="myname">....</div>Полно нормальных способов научить осла...
Читаем внимательно по ссылкам: http://docs.drupal.ru/doc/poleznye_ssylki_dlya_dizainerov
Сделал так
#block-uc_cart-0 h2
{
display:block;
background: url(images/cart-trans.png) no-repeat;
width:106px;
height:160px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/cart-trans.png,sizingMethod=crop); //background: none;
}
В коде выглядит как
.....
<div id="block-uc_cart-0" class="block block-uc_cart">
<div class="blocktop"></div>
<div class="blockinner">
<h2 class="title"> <a href="/ru/cart" title="View your shopping cart."> <!--- здесь -->
....
Картинка совсем исчезла. Попробовал убрать //background: none; - картинка появилась, но фон так и остался непрозрачным
Читаю ссылки - спасибо.
Здравствуйте,. помог таки рецепт с http://www.tigir.com/alpha_png.htm.
Включил код скрипта в head page.tpl.php
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
{
element.width = element.clientWidth;
element.height = element.clientHeight;
src = element.src;
element.src = "<?php print base_path() . path_to_theme() ?>/images/blank.gif"; //заменяем изображение прозрачным gif-ом
}
}
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
if (src)
{
element.width = element.clientWidth;
element.height = element.clientHeight;
src = src[1]; //берем из значения свойства background-шmage только адрес картинки
element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
}
}
//если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='crop')";
}
}
в CSS-е:
img{
filter:expression(fixPNG(this));
}
Ну и во всех классах и id где используется png также : filter:expression(fixPNG(this));
Одна важная маленькая деталь для фона - обязательно должны быть указаны размеры width и height, совпадающие с размерами картинки фона. Из за этого пришлось вводить для декорации дополнительные блоки div,.. что конечно наверное не совсем хорошо - не получается полное разделение структуры и представлений.
И остался ещё один непобедимый глюк:
Thickbox отказывается выводить увеличенную картинку - понятно почему - потому что картинки то нету - есть однопиксельный blank.gif.
Как это исправить и где - искал в thickbox.js и в jquery.js - не нашёл. Может у кого нибудь будут мысли по этому поводу - прошу расказать.
У меня не отображаются PNG при использовании модуля upload (красные крестики). Браузер Mozilla Firefox 2 последний, Denwer 2 (Apache 2.0, php 5.1.2, mysql 4.0). Может, кто сталкивался с проблемой, помогите.
vedariy, какое уродство.
Метод через JS не распространяется на фон, на сколько я знаю. Я использую это.
Допустим у вас в ID footer идет 24 битный PNG как background делаете
<!--[if lt IE 7]>
<style type="text/css">
img, #footer{ behavior: url(/path/to/theme/iepngfix.htc); }
</style>
<![endif]-->
или можно в наружный CSS вынести все
<!--[if lt IE 7]>
<style type="text/css" media="all">import "/path/to/theme/fix-ie.css";</style>
<![endif]-->
Как это не распространяется - а что же тогда по вашему мнению делает ветка
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка.....
.....
}
?
Решение работает - на сайте rossoriginal.ru фон продукции в центре именно так и сделан.
Возможно ваше решение тоже работает, но у меня оно не заработало.. Настраивать его не стал (хотя сейчас думаю что дело было в путях), используемое мной решение проще и нагляднее, хотя как я уже сказал есть траблы с thickbox. Интересно , а ваше решение эту проблему решает?
Про прозрачность интересная статья: http://www.mandarindesign.com/troops.html#opacitybackgroundhard
Осел, как всегда позади всех...
Как это не распространяется - а что же тогда по вашему мнению делает ветка
else //иначе, если это не картинка а другой элемент
{
//если у элемента задана фоновая картинка.....
.....
}
?
Решение работает - на сайте rossoriginal.ru фон продукции в центре именно так и сделан.
Возможно ваше решение тоже работает, но у меня оно не заработало.. Настраивать его не стал (хотя сейчас думаю что дело было в путях), используемое мной решение проще и нагляднее, хотя как я уже сказал есть траблы с thickbox. Интересно , а ваше решение эту проблему решает?
дааа, с сайтом rossoriginal.ru какой-то полный перекосяк в IE7.
хм, а в чём косяг?