Релиб / Веб-программирование / JavaScript / Не обновляется фон / Latest Posts

RE: Не обновляется фон

blaze — Wed, 16 May 2007 09:43:25 GMT

Разобрался в чем проблема! Проблема была в runtimeStyle.. Чтобы в IE удалился фон установленный фильтром, надо всего навсего элементу присвоить следующее <element>.runtimeStyle.filter = "";

Всем спасибо!!

RE: Не обновляется фон

Vizlim — Tue, 15 May 2007 22:15:39 GMT

Возможно (скорее всего) у тебя проблема происходит из-за того что ты вызываешь функцию яваскрипта из стиле, в параметре filter:

Предлагаю создать массив в этот массив вбить id значение тех тегов где ты хочешь использовать фильтр... И после проверки на браузер... если это IE, то через for (i=0;i<длинна_массива_со_значениями_id;i++)
а в цикле передавать уже значения фильтра...

зы: для теста предлагаю также просто убрать фильтр с style и по onclick="A()"
function A() {
передаёт данному иде в стиль.фильтр=сам фильтр...
} Если будет работать, значит ошибка именно в этом...

RE: Не обновляется фон

blaze — Tue, 15 May 2007 20:41:37 GMT

Что-то никак не пойму, либо я неправильно делаю, либо фильтр не удаляется. Подскажите, пожалуйста, как удалить фильтр у <td>? (В исходнике это <td>, в котором задан фон картинкой PNG)

RE: Не обновляется фон

blaze — Tue, 15 May 2007 10:55:19 GMT

Проверил сегодня и выяснилось, что все-таки это происходит именно из-за фильтра. Попробую его сначала удалять - может это поможет.

RE: Не обновляется фон

blaze — Mon, 14 May 2007 19:24:20 GMT

Вот часть исходника:
[quote]<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page</title>
<script type="text/javascript" language="javascript">
function fPng(element){
if(/MSIE (5\.5|6).+Win/.test(navigator.userAgent)){
var src;
if(element.tagName == 'IMG'){
if(/\.png$/.test(element.src)){
src = element.src;
element.src = "images/blank.gif";
}
}else{
src = element.currentStyle.backgroundImage.match(/url$"(.+\.png)"$/i)
if(src){
src = src[1];
element.runtimeStyle.backgroundImage="none";
}
}
if(src)
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
}
</script>
<script type="text/javascript">
var
section_selected = new String('secChannels');

function set_SwitchSection(fSection){
document.getElementById('sec'+fSection+'_left').innerHTML = '<img alt=" " src="images/selected_left.png" width="7" height="25" style="filter: expression(fPng(this));">';
document.getElementById('sec'+fSection+'_right').innerHTML = '<img alt=" " src="images/selected_right.png" width="7" height="25" style="filter: expression(fPng(this));">';
document.getElementById(section_selected+'_left').innerHTML = '';
document.getElementById(section_selected+'_right').innerHTML = '';

document.getElementById('sec'+fSection).style.backgroundImage = document.getElementById(section_selected).style.backgroundImage;
//document.getElementById(section_selected).removeAttribute('style');
document.getElementById(section_selected).style.backgroundImage = '';
section_selected = 'sec'+fSection;
}
</script>
</head>
<body>
<div id="MainDIV" style="top: 10px; left: 10px; bottom: 10px; width: 600px; position: absolute;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" class="forum_main_table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td class="forum_main_title_head">
<table border="0" cellpadding="9" cellspacing="0" style="width: 100%" class="main_head">
<tr>
<td nowrap="nowrap" style="width: 536px; padding: 0; vertical-align:top;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><table border="0" cellpadding="0" cellspacing="0"><tr>
<td id="secChannels_left" style="width: 7px"><img alt=" " src="images/selected_left.png" width="7" height="25" style="filter: expression(fPng(this));"></td>
<td id="secChannels" style="background-image: url('images/selected_middle.png'); width: 120px; text-align:center; filter: expression(fPng(this));" class="section_selected"><a href="javascript:set_SwitchSection('Channels');">
Section 1</a></td>
<td id="secChannels_right" style="width: 7px">
<img alt=" " src="images/selected_right.png" width="7" height="25" style="filter: expression(fPng(this));"></td>
</tr>
</table></td>
<td><table border="0" cellpadding="0" cellspacing="0"><tr>
<td id="secFilms_left" style="width: 7px">
</td>
<td id="secFilms" style="width: 120px; text-align:center; filter: expression(fPng(this));"><a href="javascript:set_SwitchSection('Films');" class="section_notselected">Section 2</a></td>
<td id="secFilms_right" style="width: 7px">
</td>
</tr>
</table></td>
<td></td>
</tr>
</table>
</td>
<td width="40" align="right"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
</body>
</html>
[/quote]

В Opera этот пример работает нормально и фон ячеек изменяется, а в IE 6 не изменяется!
В качестве фона исполюзуются PNG изображения с aplha каналом.. Как известно, IE 6 не умеет с прозрачностью png работать, поэтому я добавил фильтр (в приведенном коде он есть). Может быть это из-за фильтра и происходит? Если да, то как избежать этого?

RE: Не обновляется фон

luchik — Mon, 14 May 2007 13:48:35 GMT

Вообще работать должно... единственное что: проверь те ли кавычки ты ставишь (от этого многое зависит)

RE: Не обновляется фон

bazile — Mon, 14 May 2007 10:49:07 GMT

Вообще-то так должно работать. По крайней мере в тестовом примере у меня твой подход сработал как ожидалось. Покажи свой html код.

Не обновляется фон

blaze — Mon, 14 May 2007 02:38:17 GMT

Доброе время суток!

Подскажите, пожалуйста, как можно решить следующую проблему?

У ячейки td в качестве фона я успользую картинку png с прозрачностью. Фон задаю через style.
Почему при выполнении следующего кода, фон не удаляется
[i]document.getElementById( id объекта ).style.backgroundImage = '';[/i]? ( - тут одинарные кавычки).

Пробовал даже удалить полностью аттрибут style - все равно никакого результата.

Заранее благодарен!