Реклама на сайте Advertise with us

Кто работал с .png?

Расширенный поиск по форуму
 
Новая тема Новая тема   
Автор
Поиск в теме:
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 12:00       Ответить с цитатойцитата 

Понадобились картинки с прозрачным фоном. Раньше я делал их в ГИФе, и никаких проблем не возникало. Но ГИФ дает плохое качество, границы очень не ровные, поэтому я решил попробовать ПНГ. Столкнулся с какой-то херью (извините за слово "какой-то").
Значит, сделал я в фотошопе для примера изображение, сохранил его как ПНГ, все нормально.

Вот оно, в формате ПНГ. У меня в Фаерфоксе смотрится правильно.




Вот как это смотрелось в Фотошопе. Нормально.




Открыл его в ИЭксплорере 6, а там изображение ограничено прямоугольником по крайним как бы точкам, и фон заполнен цветным полосатым фоном. Довольно красиво, но мне такой хоккей не нужен.



Когда я открываю фотку с расширением ПНГ в Dreamweaver МХ, у меня появляется то же изображение, что и в Эксплорере, т.е с полосатым фоном - работать невозможно. Перебрал все настройки, ничего не помогает (или я что-то не правильно делаю).

У меня установлены ВиндоусХР Про, ИЕ6 и Квиктайм 6. Компьютер двухядерный, довольно свежий - трехнедельный, вряд ли успел за это время шибко устареть.

Попробовал открыть ПНГ-файл на другом компьютере, где просто пентиум-4 и Квиктайм7 -- в Эксплорере-6 та же проблема с идиотским фоном, в Дримвивере цветной фон отсутствует, но прозрачность исчезла, девка оказалась на чиста белом непрозрачном фоне.

Что делать - ума не приложу. Поделитесь, пожалуйста, своим умом.

0
 



С нами с 31.12.03
Сообщения: 160
Рейтинг: 260

Ссылка на сообщениеДобавлено: 08/10/06 в 12:06       Ответить с цитатойцитата 



Последний раз редактировалось: Asiris (12/07/20 в 12:25), всего редактировалось 1 раз

4
 



С нами с 06.03.03
Сообщения: 1650
Рейтинг: 1096

Ссылка на сообщениеДобавлено: 08/10/06 в 12:12       Ответить с цитатойцитата 

я сам не сталкивался, но часто натыкаюсь на инфу о том, что IE с PNG криво работает, именно с прозрачностью, и поэтому PNG пока не такой распространенный формат как хотелось бы.

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 12:32       Ответить с цитатойцитата 

webboxxx писал:
я сам не сталкивался, но часто натыкаюсь на инфу о том, что IE с PNG криво работает, именно с прозрачностью, и поэтому PNG пока не такой распространенный формат как хотелось бы.

А почему Дримвивер не видит прозрачность?

0
 



С нами с 26.04.06
Сообщения: 77
Рейтинг: 70

Ссылка на сообщениеДобавлено: 08/10/06 в 12:58       Ответить с цитатойцитата 

4
 



С нами с 02.10.06
Сообщения: 13
Рейтинг: 21

Ссылка на сообщениеДобавлено: 08/10/06 в 12:59       Ответить с цитатойцитата 

Это старая проблема с IE версиями ниже 7.0
Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript.
У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 13:16       Ответить с цитатойцитата 

d0ck3r писал:
Это старая проблема с IE версиями ниже 7.0
Только на маке 5.5 нормально показывает. Ищи в гугле по png transparency - на эту тему куча статей. Решается подключением одного файла javascript.
У дримвивера нету своего браузера, он использует ие для отображения дизайн-мода (соответственно ту версию которая у тебя стоит).

Док, спасибо, ясно изложил.
Я понял, что в таком случае мне и мучаться не стоит, все-одно, не пойму ни хера, темен я технически.
А не подскажешь, как в ГИФЕ сделать границы поровнее? Мне нужны небольшие картинки с очень неровными объектами на прозрачном фоне.

0
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 13:20       Ответить с цитатойцитата 

besoft писал:
http://community.livejournal.com/ru_coding/259331.html

Спасибо. Было очень интересно. Как будто посмотрел красивые китайские иероглифы - ничего не ясно, но за душу берет.

0
 



С нами с 26.04.06
Сообщения: 77
Рейтинг: 70

Ссылка на сообщениеДобавлено: 08/10/06 в 13:31       Ответить с цитатойцитата 

protch писал:
Спасибо. Было очень интересно. Как будто посмотрел красивые китайские иероглифы - ничего не ясно, но за душу берет.


)))
картинку так вставляешь:
Код:
<i class="png"><img src="image.png" alt="Image"/></i>


и потом в css добавляешь следующий код:

Код:

    * html .png
    {
        width: expression(this.firstChild.width);
        filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
                this.firstChild.src+"', sizingMethod='image')");

        background: expression("transparent url("+
                this.firstChild.src.replace(".png", ".gif")+") no-repeat");
        backgr\ound: none !important;
    }

    * html .png img
    {
        behavior: expression(this.style.visibility="hidden");
    }


после чего должна появиться прозрачность в ИЕ

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 13:53       Ответить с цитатойцитата 

besoft писал:
)))
картинку так вставляешь:

[code]
* html .png

после чего должна появиться прозрачность в ИЕ

Спасибо еще раз. Чувствую, что это именно то, что доктор прописал. Остались, правда, кое-какие неясности, и я мог бы задать вопрос, но боюсь, что софорумники, усомнившись в моих умственных способностях, натравят на меня спецслужбу из Кащенки или с Канатчиковой. А мне там как-то не с руки.
Я умею только в Дримвивере чой-то делать, а шпиёнским кодам всяким буржуазным мне пролетарское происхождение не позволяет доверять.
Можно, я спрошу тебя по мылу?
Моё - 33banana@gmail.com
Сочтемся.

0
 

Maxx-Traffic.biz

С нами с 09.12.03
Сообщения: 754
Рейтинг: 383

Ссылка на сообщениеДобавлено: 08/10/06 в 14:22       Ответить с цитатойцитата 

Тема заинтересовала...
Цитата:
)))
картинку так вставляешь:

Код:
<i class="png"><img src="image.png" alt="Image"/></i>


и потом в css добавляешь следующий код:


Код:

* html .png
{
width: expression(this.firstChild.width);
filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+
this.firstChild.src+"', sizingMethod='image')");

background: expression("transparent url("+
this.firstChild.src.replace(".png", ".gif")+") no-repeat");
backgr\ound: none !important;
}

* html .png img
{
behavior: expression(this.style.visibility="hidden");
}



после чего должна появиться прозрачность в ИЕ


Все зделал как написано, тока ИЕ стал ругаться на элемент Activex и в результате у картинки был белый фон...icon_sad.gif(( Если тока разрешить Activex что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать?

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 14:29       Ответить с цитатойцитата 

Maxik писал:
Тема заинтересовала...

Все зделал как написано

КАК ты это сделал?!!!

0
 

Maxx-Traffic.biz

С нами с 09.12.03
Сообщения: 754
Рейтинг: 383

Ссылка на сообщениеДобавлено: 08/10/06 в 14:41       Ответить с цитатойцитата 

В css добавил код, который ты дал.
Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.

0
 

Maxx-Traffic.biz

С нами с 09.12.03
Сообщения: 754
Рейтинг: 383

Ссылка на сообщениеДобавлено: 08/10/06 в 14:46       Ответить с цитатойцитата 

Прошу прощения, код который дал besoft

0
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 15:16       Ответить с цитатойцитата 

Maxik писал:
В css добавил код, который ты дал.
Потом в страничку картинку вставил вышеуказаным способом, открыл страничку в ИЕ, он ругнулся насчет ActiveX, когда я разрешил ActivedX все отобразилось как положено, с прозрачным фоном.

Все предельно понятно. Осталось два невыясненных вопроса:
1. КАК ты добавил код в css?
2. КАК ты вставил картинку вышеуказанным способом?
А вот как открыть страничку в ИЕ я уже знаю. И ругнуться могу - не хуже его.

0
 

Maxx-Traffic.biz

С нами с 09.12.03
Сообщения: 754
Рейтинг: 383

Ссылка на сообщениеДобавлено: 08/10/06 в 15:54       Ответить с цитатойцитата 

Цитата:
1. КАК ты добавил код в css?

открываешь css в блокноте, и через копи паст тупо встявляешь туда вышеуказаный код.

Цитата:
2. КАК ты вставил картинку вышеуказанным способом?


Мда, как вставляекся картинка в html? Правильно, <img src=....>.
тока нада заключить в контейнер <i class="png"><img src=....></i>
и будет тебе счастье...

4
 



С нами с 19.02.03
Сообщения: 129
Рейтинг: 86

Ссылка на сообщениеДобавлено: 08/10/06 в 16:30       Ответить с цитатойцитата 

в css вот этот код

img {behavior: url('png.htc');}


и код волшебного файлика


-----------png.htc----------

<public:component>
<public:attach event="onpropertychange" onevent="propertyChanged()" />
<script>

var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
var realSrc;
var blankSrc = "./img/pix.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) {
element.src = blankSrc;
return;
}

if ( ! new RegExp(blankSrc).test(src)) {
// backup old src
realSrc = src;
}

// test for png
if ( realSrc && /\.png$/.test( realSrc.toLowerCase() ) ) {
// 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>
</public:component>
-----------png.htc----------

да, не забудь про прозрачный гиф, что указан в коде, размером 1х1

ЗЫ Помоему самый лучший на сегодня вариант, работает везде
Честно был стрырен у Лебедева и доработан ;-)

4
 



С нами с 26.04.06
Сообщения: 77
Рейтинг: 70

Ссылка на сообщениеДобавлено: 08/10/06 в 16:37       Ответить с цитатойцитата 

Maxik писал:
Все зделал как написано, тока ИЕ стал ругаться на элемент Activex и в результате у картинки был белый фон...icon_sad.gif(( Если тока разрешить Activex что пользователь врядли сделает, после виндовых предупреждений о безопасности....Мож есть другой путь, чтоб ИЕ не раздражать?

если ты с локального диска открывал то ИЕ всегда ругается на скрипты. если из интернета то у меня не ругается...

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 08/10/06 в 17:23       Ответить с цитатойцитата 

KEV писал:
в css вот этот код
img {behavior: url('png.htc');}

и код волшебного файлика

да, не забудь про прозрачный гиф, что указан в коде, размером 1х1
ЗЫ Помоему самый лучший на сегодня вариант, работает везде
Честно был стрырен у Лебедева и доработан ;-)

Спасибо.
Написал тебе на мыло из профиля.

0
 



С нами с 22.10.02
Сообщения: 349
Рейтинг: 98

Ссылка на сообщениеДобавлено: 08/10/06 в 20:08       Ответить с цитатойцитата 

Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.
Вот к примеру твой пример просто пересахранен.

Фотошоп CS2
но и в более старых версиях тоже самое было, все нормально отображается.

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 09/10/06 в 00:16       Ответить с цитатойцитата 

art-s писал:
Странно у меня если просто сохроняешь в фотошопе не в PNG-24 а в PNG-8 128 Dithered с стандартными настройками, то во всех браузерах все нормально отображается.

Спасибо. Щазз запробую. О результате доложу.

0
 

осинизатор

С нами с 10.03.03
Сообщения: 8491
Рейтинг: 819

Ссылка на сообщениеДобавлено: 09/10/06 в 01:08       Ответить с цитатойцитата 

У меня в IE 7 нормально прозрачность работает. Кстати, .png это не новый формат, а очень даже старый (кажется с амиги еще). Х.з. почему его не все браузеры поддерживать умеют. Тем более, у него есть очень большой плюс перед гифом - png не ограничен 256-ю цветами, как gif, например.

ушел на завод

4
 



С нами с 02.10.06
Сообщения: 13
Рейтинг: 21

Ссылка на сообщениеДобавлено: 09/10/06 в 08:09       Ответить с цитатойцитата 

В Ie 7 поддержку этого формата ввели недавно из-за долгих препирательств с дезигнерами )), поэтому там все работает.
У KEVa действительно один из лучших вариантов решения.
Есть во всех этих методах недостатки -
1) до подгрузки файлика все прозрачное пространство заливается серым цветом, потом смаргивает и отображается нормально
2) там проблемы с линками, то есть на этот img ты не сможешь повесить линку.

Большинство в ИЕ подставляет гифки вместо пнг, так что тебе действительно лучше не заморачиваться. Просто добавь качества гифке, в шопе есть параметр matte - задай его близким к цвету фона, или вообще цвет фона если он у тебя однотонный )) и будет тебе щастье.

4
 



С нами с 22.10.02
Сообщения: 349
Рейтинг: 98

Ссылка на сообщениеДобавлено: 09/10/06 в 23:29       Ответить с цитатойцитата 

protch писал:
Спасибо. Щазз запробую. О результате доложу.

Ну что получается так?

4
 
+ + +


С нами с 08.06.06
Сообщения: 712
Рейтинг: 136

Ссылка на сообщениеДобавлено: 14/10/06 в 18:56       Ответить с цитатойцитата 

art-s писал:
Ну что получается так?

С ПНГ-8 у меня все так же херово работало, но я все-таки решил проблему. С помощью добрых людей.
В папку, где хранятся пнг-фотки и html-страничка для них, я тупо добавляю два любезно даденых мне файлика - .css и .htc, а также две (почему-то) прозрачных гиф-картинки по 1 пикселю. После этого я помещаю на страничку картинки, а в их код способом копи-паст вставляю несколько букв. И все!
После этого прозрачность сохраняется не только в 6-м, но и в 5-м Эксплорере.

0
 
Новая тема Новая тема   

Текстовая реклама в форме ответа
Заголовок и до четырех строчек текста
Длина текста до 350 символов
Купить рекламу в этом месте!


Перейти:  



Спонсор раздела Стань спонсором этого раздела!

Реклама на сайте Advertise with us

Опросы

Рецепт новогоднего блюда 2022



Обсудите на форуме обсудить (11)
все опросы »