Javascript. Фильтры. IE и другие...

А как вообще сочетается ('img/"; с традиционными взглядами на ситаксис?

[QUOTE=mfender]А как вообще сочетается ('img/"; с традиционными взглядами на ситаксис?[/QUOTE]
А в чем собственно проблема? В зависимости от значения bUrl используется конкатенация - bUrl+"img.png')!

[HTML]
<script language="javascript">
if (navigator.userAgent.indexOf('MSIE')!=-1) document.getElementById('id').style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/img.png')";
else document.getElementById('id').style.background = "url('img/img.png')";
<script>[/HTML]

Я бы так написал

Я не понял одного. А для чего это нужно? Просто правила в CSS перекрывают друг друга, и если вначале поставить background, а затем поставить фильтр... Или использововать условные комментарии (единственное за что я благодарен мелкомягким)? Ведь если можно обойтись без JavaScript, то это нужно делать.

[QUOTE=Unglued][HTML]
<script language="javascript">
if (navigator.userAgent.indexOf('MSIE')!=-1) document.getElementById('id').style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/img.png')";
else document.getElementById('id').style.background = "url('img/img.png')";
<script>[/HTML]

Я бы так написал[/QUOTE]

И я бы так написал :) но все дело в том, что это лишь пример, а на самом деле кода намного больше и много больше лишних буковок! )) Поэтому такой вариант не подходит.
[QUOTE=shaelf]Просто правила в CSS перекрывают друг друга, и если вначале поставить background, а затем поставить фильтр...[/QUOTE] Вообще-то, если это будет например IE, то свойства background он не увидит, и наоборот.
[QUOTE=shaelf]Ведь если можно обойтись без JavaScript, то это нужно делать.[/QUOTE] Если бы можно было - я б вам голову не морочил (

[quote=cogonet]И я бы так написал :) но все дело в том, что это лишь пример, а на самом деле кода намного больше и много больше лишних буковок! )) Поэтому такой вариант не подходит.
......
Если бы можно было - я б вам голову не морочил ([/quote]
Лаконичность кода нужна, но не надо чрезмерно усердствовать, сводя процедуру к одной строке.

А по теме: используй GIF. Он более перевариваемый всеми брузерами. PNG хороший, но пока ещё не общепринятый.

[QUOTE=mfender]Лаконичность кода нужна, но не надо чрезмерно усердствовать, сводя процедуру к одной строке. [/QUOTE]

Господа, я вижу вы ищите легких путей! ))
А хоть кто-то попробовал написать так как я? Почему пример не работает?
Просто кода действительно много для разных версий, и писать одно и тоже только из-за изменения двух параметров не очень хочется - неправильно это как-то!

Гиф уместен не всегда!

[QUOTE=cogonet]Гиф уместен не всегда![/QUOTE]
Создавай сайты полностью во флеше и будет тебе счастье. Там и прозрачность, и сокеты, и анимация и еще много вкусняшек...

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

[QUOTE=RussianSpy]Создавай сайты полностью во флеше и будет тебе счастье.[/QUOTE]
Хороший совет, обязательно воспользуюсь! Когда начну делать не кретинский дизайн!

>>Если бы можно было - я б вам голову не морочил (
Доводы против.

[quote=cogonet]Господа, я вижу вы ищите легких путей! ))
А хоть кто-то попробовал написать так как я? Почему пример не работает?
Просто кода действительно много для разных версий, и писать одно и тоже только из-за изменения двух параметров не очень хочется - неправильно это как-то!

Гиф уместен не всегда![/quote]


[quote=cogonet]Господа, я вижу вы ищите легких путей! ))[/quote]
Господин, лёгких путей ищете Вы. Ибо спросить готового ответа на форуме - самое простое.
[quote=cogonet]А хоть кто-то попробовал написать так как я? Почему пример не работает?[/quote]
А почему бы тебе не написать так, ка пишу я? Может и "пример" заработает?

Ты когда-нибудь для Windows писал? Там даже для каждой версии код разный иногда бывает....

[QUOTE=shaelf]
Доводы против.[/QUOTE]
Изменяется всего два элемента, но на 6 разных вариантов. Это 6 css файлов! Нецелесообразно ((

[QUOTE=mfender]Господин, лёгких путей ищете Вы. Ибо спросить готового ответа на форуме - самое простое.
[/QUOTE]
О, поверте, прежде чем прийти сюда, я долго посидел над этим вопросом!
[QUOTE=mfender]А почему бы тебе не написать так, ка пишу я? Может и "пример" заработает?[/QUOTE]
Прости, може я чего-то не заметил. Как так?
[QUOTE=mfender]
Ты когда-нибудь для Windows писал? [/QUOTE] :eek: Для Windows - нет!!! Под Windows - да. Но знаете ли, Windows это не браузер с интернетом где каждый байт может быть на счету!!

[QUOTE=cogonet]Но знаете ли, Windows это не браузер с интернетом где каждый байт может быть на счету!![/QUOTE]

Собственно именно благодаря такому мнению и появляются здоровенные программы вроде Неро7 под 600 Мб или игры под 5-6 Гб...

"Низкую квалификацию и лень программистов старательно компенсируют производители железа год от года выпуская все более мощные комплектующие" (с)

[QUOTE=RussianSpy]Собственно именно благодаря такому мнению и появляются здоровенные программы вроде Неро7 под 600 Мб или игры под 5-6 Гб...[/QUOTE]

Что-то я не совсем понял. Это в чью сторону выпад, мою или mfender. Я вродь как поменьше кода хочу написать :confused:

Кстати таблицы стилей называются каскадными не просто так.
Неужеле сложно сделать ещё один для ослика? Или вообще писать в комментах ослиных <!--[if IE]>
>>Это 6 css файлов! Нецелесообразно ((
А вот по поводу целесообразности готов спорить. Если нужен интерактив, то нужно юзать JavaScript, если она используется только для эагрузки этого background'a, то неуверен. Просто много людей сидят с отключёнными скриптами и списывать их со счетов нельзя.

Я искренне надеюсь, что это не :hover )

флешь - говно, а всплывающее оконце с полупрозрачной тенью - это очень красиво

есть еще вариант


<style type="text/css" id="shadowIE" disabled="true">
....
</style>
<style type="text/css" id="shadowOpera" disabled="true">
....
</style>
...
if (IE) document.styleSheets("shadowIE").disabled = false;
if (Opera) document.styleSheets("shadowOpera").disabled = false;

Кстати, а что конкрено не работает?

[QUOTE=Unglued]флешь - говно,[/QUOTE]
Аргументируйте. Он говно потому что вы не умеете им пользоваться? Или у вас есть более веские аргументы
[QUOTE=Unglued] а всплывающее оконце с полупрозрачной тенью[/QUOTE]
А как насчет тех браузеров, которые не поддерживаются вашим "примером"? Safari или Epiphania.... Да тот же Firefox например... А что делать с теми браузерами которые не поддерживают фильтры IE (которые кстати изобретение БГ и его компании и не являются стандартом, а значит сторонние производители вовсе не обязаны их поддерживать).

Спасибо, вариант хороший, но к сожалению мне не подходит ((
А не работает код из первого месаджа.

Если, автор топика, настолько принципиально против прозрачных PNG, кстати уже работающь в IE 7, то используй flash, только надо будет убивать предложение на активацию (т.е. нажмите, что бы активировать).
Как это делать, см. вот здесь:
http://msdn.microsoft.com/workshop/author/dhtml/overview/activating_activex.asp

А вообще, используй CSS хак для ie, а для нормальных браузеров, просто пиши адрес картинки, все же проще, чем плодить тучу кода, для разделения, кстати, кода будет гораздо меньше.

[QUOTE=cogonet]
Но, к моему большому сожалению такая конструкция почему то не работает, а если точнее то IE выдает «Object doesn’t support this property or method.» Может кто знает в чем проблема? Или другой вариант ее решения?[/QUOTE]
А ты весь код показал?
Дело в том, что для IE нужно задать прозрачность так (применительно к CSS):

[QUOTE=cogonet]

[/QUOTE]
Вообще, думаю у тебя просто ошибка, выше писали, что ты скобку не закрыл, в примере. Может ищё где есть такие же ошибки.

Это не незакрытая скобка!!!! bUrl - строковая переменная! К которой потом добавляется имя файла с закрытой скобкой!!!! Эх...

Во-первых в коде ошибка:
document.getElementById('id').style.setProperty(browsStyle, bUrl+"img.png')"
<script>
в самом конце должно быть еще - ");"
т.е. ...style.setProperty(browsStyle, bUrl+"img.png')");

Во-вторых я считаю что не надо так извращаться, а в стялях прописать И бэкгроунд И фильтр, ибо если браузер фильтр не поймет он его просто опустит, а IE прекрасно работает с совместно указаннми параметрами.
Вот как например у меня написано:
[HTML]
<style type="text/css">
#shadowColor{
background-color:#FF0000;
background: url('img/shadow.png');
background: expression('none');
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/shadow.png', sizingMethod='crop');
position: absolute;
margin-bottom: 30px;
height: 151px;
width: 121px;
z-index: 4;
}
</style>
[/HTML]

:)

Забыли о стилях. А в чем тогда проблема и как ты собираешься менять тень в зависимости от браузера?

PS.: Чтобы найти ошибку в коде, надо убедиться, что каждая строчка работает именно так, как задумано. Для этого после каждой строки вызови alert(), а в качестве аргумента напиши то, что данная строка должна возвращать. Возможно, несколько криво описал, но надеюсь суть метода ясна.

PPS.: А нельзя ли еще раз задать вопрос, с описаниями всех моментов и подробностей?

PPPS.: А откуда ты вообще взял функцию setProperty()??? я такую впервые вижу. Это твой личный метод объекта "style"? у меня строка alert(document.getElementById('shadowColor').style.setProperty()) выдала ошибку: "Объект не поддерживает это свойство или метод."

О setProperty() уже тоже можно забыть - он не поддерживается IE поэтому и выдает ошибку ))

Задаю еще раз вопрос: есть картинка пнг! в зависимости от действий пользователя она (свойство background) изменяется - без перезагрузки старницы. нужно с помощью яваскрипт сделать варианты для разных браузеров (filter для IE). Без использования css файлов и тегов <style> - так как это слишком много кода! ))

Ок, легко тебе такое напишу, только скажи

изменяется, всмысле то появляется то исчезает? или что-то еще?

меня небыло в сети, тема еще актуальна? ))

ну ты попробуй, а я посмотрю что получится.

Вот, как просил
[HTML]<html>
<head>
<title>Простенькая тень</title>
<script type="text/javascript">
var count = 0;
function changeBg(){
var shad = document.getElementById('shadow');
if(count == 0){
shad.style.background = "url('img/colortable/shadow_color2.png') no-repeat" ;
shad.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/colortable/shadow_color2.png', sizingMethod='crop')";
count = 1;
}
else{
shad.style.background = "url('img/colortable/shadow_color.png') no-repeat" ;
shad.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/colortable/shadow_color.png', sizingMethod='crop')";
count = 0;
}
}
</script>
</head>
<body>
<span style="color:#0000FF; cursor:pointer;" onclick="changeBg(count);">Click!</span>
<br /><br /><br />
<div style="position: absolute; height: 138px; width: 112px; margin-bottom: 30px; z-index: 5;">
<table width="112" height="133" border="1" cellpadding="1" cellspacing="0">
<tr><td align="center" bgcolor="#FFFFCC">Табличка с текстом</td></tr>
</table>
</div>
<div id="shadow" style="z-index: 4; height: 151px; width: 121px; position: absolute; margin-bottom: 30px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/colortable/shadow_color.png', sizingMethod='crop'); background: expression('none'); background: url('img/colortable/shadow_color.png') no-repeat;" ></div>
asdsaefwqefdwafggawe<br />
FasfqwfwqdfEfaerfewf<br />
fasdfsadfsadfadesfwF<br />
Asdfasfasdffasddsffa<br />
Asdfasasdfadadsfsdsf<br />
Dfasdfasdsdggaefwefd<br />
AsdfwaefasdwfsdfqweF<br />
asdfawefwesdfsdfssss<br />
</body>
</html>[/HTML]