Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Использование файлов PNG на страницах.

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Кто использует на своих страницах графику в формате PNG, нужен совет. В Мозилле и Нетскейпе PNG отображается нормально, с прозрачным фоном, а в IE нет.
На сайте Microsoft есть описание как сделать, чтобы в IE была прозрачность:
http://support.microsoft.com/default.aspx?scid=KB;en-us;q294714
 
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alphaimageloader.asp
 
Не хочу показаться глупым Но объясните мне, пожалуйста, веб-мастера с опытом, как сделать прозрачный фон у PNG. Пробую, пробую и ничего не получается, фон или всё-равно остаётся, или картинки вообще не видно на странице.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 04:06 05-03-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Вот пара способов, как размещать png на странице, чтоб IE/Mozilla/Opera нормально всё отображали (т.е. чтоб внедрение в код страницы эксплорерного мусора не мешало человеческому отображению пнг Оперой, Мозилой и т.п.):
 
http://www.alistapart.com/stories/pngopacity/
http://www.nbsp.ru/articles/8/
(тут же простой ответ на твой вопрос:
"...Начнем с того, что в исходнике .psd убираем ненужные слои из-под тени и заливки.
Сохраняем этот кусок как .png-24 с прозрачностью (transparency).
")
 
 
Добавлено
А вообще, враги мелкософтовцы, что такой формат поддерживают только через задний проход (т.е. так:
<img src="empty.gif" width="x" height="y" style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');">
вместо простого общечеловеческого <img src=img.png>).
 
 
 
Добавлено
Да...
Это чудо--
<img src="empty.gif" width="x" height="y" style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');">
работает только в ИЕ5.5+, т.е. в 5-м, который по умолчанию в 2000-й винде и во многих изданиях 98-й ставится, ни о какой полупрозрачности не может и речи идти :‘(




[Исправил изменившийся адрес статьи. — Svarga.]

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 04:33 05-03-2003 | Исправлено: Svarga, 13:45 21-02-2004
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
Спасибо за отклик
Вроде что-то получается. Можно и так.
 

Цитата:
<DIV ID="oDiv" STYLE="position:absolute; height:128; width:128;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
     src='картинка.png', sizingMethod='scale');" >
</DIV>

Но не понятно, как правильно разместить картинку в нужном месте. Вставляешь в ячейку таблицы, а картинка где-то немного в стороне получается.
 
Как тупо всё устроено в MS!

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 05:11 05-03-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS

Цитата:
Можно и так...

Так-- это исключительно для эксплорера %)  
 
Почитай статьи.
 

Цитата:
Как тупо всё устроено в MS!

Почему же? Не всё. Много есть и хорошего. Просто именно это-- весьма коряво.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 05:25 05-03-2003
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Но так:

Цитата:
<img src="1.gif" width="x" height="y" style="  
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='картинка.png');">
писанины меньше  
Но визуально (если не вручную всё писать) всё-таки не очень удобно делать. Ладно, будем изучать.
 
Svarga

Цитата:
Почему же? Не всё. Много есть и хорошего. Просто именно это-- весьма коряво.
- не спорю.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 05:25 05-03-2003 | Исправлено: WONDROUS, 05:31 05-03-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
не понятно, как правильно разместить картинку в нужном месте. Вставляешь в ячейку таблицы, а картинка где-то немного в стороне получается.

так ты размещаешь картинку абсолютно отпозиционированным слоем.
лучше попробуй через <img src="empty.gif" width="x" height="y" style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');">

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 05:27 05-03-2003
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
Подскажи, если можешь, как сделать прозрачность в этом случае?
 
<IMG STYLE="filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=20)
progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"
src="m.png" height="128px" width="128px" border="0" alt="cone">

и
<img src="empty.gif" width="x" height="y" style=" filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');">
Как это можно совместить (чтобы размытие было у PNG)? Я по разному делал, вписывал, но никак.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 06:23 05-03-2003 | Исправлено: WONDROUS, 06:26 05-03-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
а MotionBlur сильно нужен?
не проще ли его в графике сделать?

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 07:17 05-03-2003
WONDROUS



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
Не очень. Просто, хотел узнать, возможно ли так сделать.

Всего записей: 3346 | Зарегистр. 30-06-2002 | Отправлено: 07:38 05-03-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
WONDROUS
Cкорее всего нет:
не уверен, что можно как-то вообще прописать стиль для подгружаемой таким образом картинки--
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')
 
С трудом представляю, можно ли эту картинку вообще найти в объектной модели данного документа, чтобы что-то с ней сделать.
 
Можешь попытаться указать стиль с MotionBlur для какого-то родительского по отношению к картинке элемента (DIV, например)-- может что-то и получится, хотя врядли .

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 07:44 05-03-2003 | Исправлено: Svarga, 07:53 05-03-2003
SeRJiO_Z



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Попробую продолжить тему, новую создавать нехочется.
По статье в http://www.nbsp.ru/ разобрался что к чему. Все получилось.
Но вот возник вопрос: если делаю кнопку с png и ставлю Swap image (тоже png), то Restory первую кнопку не возвращает. Что делать? Как победить?
сенкс заранее.

----------
Джентльмен - это тот, кто называет кошку кошкой, даже наступив на нее в темноте.

Всего записей: 868 | Зарегистр. 05-11-2001 | Отправлено: 01:29 19-02-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SeRJiO_Z

Цитата:
 ставлю Swap image (тоже png), то Restory первую кнопку не возвращает.

код покажи
(как картинки выводятся и скрипты)

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 06:17 19-02-2004
SeRJiO_Z



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Сорри, был в командировке- не мог сразу ответить.
Вот код и содержимое pngbehavior.htc
 
<head>
<style type="text/css">
body  
img {
   behavior: url("pngbehavior.htc");
}
 
</style>
<script language="JavaScript" type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
 
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
 
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
 
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
 
</head>
(скип)
<div id="Layer4" style="position:absolute; width:117px; height:70px; z-index:9; left: 155px; top: 173px; visibility: visible;"><a href="download.html"><img src="_image/but2.png" name="Image1" width="100" height="59" border="0" id="Image1" onclick="MM_openBrWindow('download.html','','')" onmouseover="MM_swapImage('Image1','','_image/but2_2.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
 
------------- содержимое pngbehavior.htc  ---------------
<script>
 
var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) &&
navigator.platform == "Win32";

var realSrc;
var blankSrc = "blank.gif";
 
if (supported) fixImage();
 
function propertyChanged() {
if (!supported) return;

var pName = event.propertyName;
if (pName != "src") return;
// if not set to blank
if (!new RegExp(blankSrc).test(src))
fixImage();
};
 
function fixImage() {
// get src
var src = element.src;
 
// check for real change
if (src == realSrc && /\.png$/i.test(src)) {
element.src = blankSrc;
return;
}
 
if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if (/\.png$/i.test(realSrc)) {
// set blank image
element.src = blankSrc;
// set filter
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft." +
"AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
else {
// remove filter
element.runtimeStyle.filter = "";
}
}
 
</script>
--------------------------------------
 
Модератору: я потом вырежу.

----------
Джентльмен - это тот, кто называет кошку кошкой, даже наступив на нее в темноте.

Всего записей: 868 | Зарегистр. 05-11-2001 | Отправлено: 04:07 21-02-2004
SeRJiO_Z



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Может трабл в этом куске:
 

Цитата:
function MM_swapImgRestore() { //v3.0  
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;  

Но я сам в этом не разберусь


----------
Джентльмен - это тот, кто называет кошку кошкой, даже наступив на нее в темноте.

Всего записей: 868 | Зарегистр. 05-11-2001 | Отправлено: 13:23 21-02-2004
Ausw



Moderator
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
А такая фишка работает только в XP-шном IE, а у кого 2000 - могут покурить, пока устанавливается ХР

----------
Be High.

Всего записей: 7371 | Зарегистр. 12-07-2001 | Отправлено: 14:14 21-02-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ausw

Цитата:
А такая фишка работает только в XP-шном IE, а у кого 2000 - могут покурить, пока устанавливается ХР

MSIE 5.5+, если точнее, т. е. 5- при любом раскладе не знают, что такое полупрозрачность png.

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 14:47 21-02-2004 | Исправлено: Svarga, 15:04 21-02-2004
SeRJiO_Z



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Мдя, это не хорошо.
Ну а все-таки- в чем трабла?
Уважаемый Svarga, не поможете разобраться?


----------
Джентльмен - это тот, кто называет кошку кошкой, даже наступив на нее в темноте.

Всего записей: 868 | Зарегистр. 05-11-2001 | Отправлено: 14:23 22-02-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
SeRJiO_Z
Прошу прощения, что на неделю задержался с ответом.
 
Вот в действии:
http://forall.ru-board.com/Svarga/png_opacity_MSIE/test.htm
Все файлы в архиве:
http://forall.ru-board.com/Svarga/png_opacity_MSIE/png_opacity_MSIE.rar
 
В MSIE 5- и NN4 все png просто заменяются на одноимённые gif’ы.
В MSIE 6 вроде бы работает, в MSIE 5.5 должно тоже без проблем быть, хотя в моём — что-то не то, правда, он у меня неполноценный — стоит параллельно с 5.0 и 4.0... Так что, просьба ко всем, у кого стоит MSIE 5.5: проверьте, пожалуйста, нормально ли работает.
 
Добавлено
Само собой, в Опере и Мозилле всё работает по-прежнему нормально, как и без кривых ИЕ-скриптов.

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 01:59 28-02-2004 | Исправлено: Svarga, 02:06 28-02-2004
8AleX8



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Making Internet Explorer use PNG Alpha transparency http://www.howtocreate.co.uk/alpha.html

Всего записей: 1813 | Зарегистр. 11-12-2001 | Отправлено: 23:05 03-03-2004
SeRJiO_Z



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Svarga

Цитата:
Прошу прощения, что на неделю задержался с ответом.  

Я тоже отсутствовал больше недели, так что но проблем
Да, все классно работает, еще не разбирался в деталях.


----------
Джентльмен - это тот, кто называет кошку кошкой, даже наступив на нее в темноте.

Всего записей: 868 | Зарегистр. 05-11-2001 | Отправлено: 00:15 11-03-2004
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Использование файлов PNG на страницах.


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2024

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru