VPF::Как изменить свойство Background-image?

Bangladesh

Дата 30.9.2006, 21:23 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: -1
Всего: 17

я использую прозрачный PNG рисунки выглядят у меня в коде вот так:

Код


<!-- 03 -->

                                               <div style="position: absolute; top: 44px; left: 282px;">
                                                     <img id="03" style="cursor: hand; cursor: pointer;" onMouserOver="Change('03', 0);" onMouserOut="Change('03', 1);" class="png" src="images/spacer.gif" width="151" height="152" style="background: url('images/buttons/03.png');">
                                               </div>

                                               <div style="position: absolute; top: 58px; left: 402px;">
                                                     <img id="03" class="png" src="images/spacer.gif" width="126" height="30" style="background-image: url('images/buttons/03w.png');">
                                               </div>

                                               <!-- 03 -->

функция Change:

Код



  function Change(id, type)
                                                         {
                                                                 if(type == 0)
                                                                 {
                                                                         getElementById(id).backgroundImage = "url('images/buttons/" + id + "s.png')";
                                                                         getElementById(id + 'w').backgroundImage = "url('images/buttons/" + id + "ws.png')";
                                                                 }
                                                                 else
                                                                 {
                                                                         getElementById(id).backgroundImage = "url('images/buttons/" + id + ".png')";
                                                                         getElementById(id + 'w').backgroundImage = "url('images/buttons/" + id + "w.png')";
                                                                 }

                                                         }

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

--------------------

ок

12345c

Дата 30.9.2006, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

.style.backgroundImage='url(.....)';

Bangladesh

Дата 30.9.2006, 23:40 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: -1
Всего: 17

исопльзовать это свойство так и не получилось с PNG. я переделал так:

Код



<script type="text/javascript">

function ChangeUp(id)
{
document.getElementById(id).innerHTML = '<img class="png" src="images/spacer.gif" width="151" height="152" style="background: url(\'images/buttons/' + id + 's.png\');">';
document.getElementById(id + 'w').innerHTML = '<img class="png" src="images/spacer.gif" width="126" height="30" style="background-image: url(\'images/buttons/' + id + 'ws.png\');">';
}

function ChangeDown(id)
{

document.getElementById(id).innerHTML = '<img class="png" src="images/spacer.gif" width="151" height="152" style="background: url(\'images/buttons/' + id + '.png\');">';
document.getElementById(id + 'w').innerHTML = '<img class="png" src="images/spacer.gif" width="126" height="30" style="background-image: url(\'images/buttons/' + id + 'w.png\');">';

}

</script>

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

рисунки теперь выглядят так:

Код


<!-- 03 -->

<div id="03" style="position: absolute; top: 44px; left: 282px;" onMouseOver="ChangeUp('03');" onMouseOut="ChangeDown('03');">
<img class="png" src="images/spacer.gif" width="151" height="152" style="background: url('images/buttons/03.png');">
</div>

<div id="03w" style="position: absolute; top: 58px; left: 402px;">
<img class="png" src="images/spacer.gif" width="126" height="30" style="background-image: url('images/buttons/03w.png');">
</div>

<!-- 03 -->

класс PNG (может в нём дело):

Код


.png {               //background-image: none ! important;
                         behavior: url('pngfix.htc'); }

можно ли как-то исправить положение?

Это сообщение отредактировал(а) I, GyoZ - 30.9.2006, 23:44

--------------------

ок

skyboy

Дата 1.10.2006, 09:49 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260

Цитата(I @ GyoZ, 30.9.2006, 22:40

)

исопльзовать это свойство так и не получилось с PNG.

почему? как назвло - под рукой ни одного png, но конструкция должна работать. только должно идти присвоение не просто ...backgroundImage="myImage.png";, а как и в стилях: ...backgroundImage="url(myImage.png)";

Bangladesh

Дата 1.10.2006, 17:46 (ссылка)

(нет голосов)

Загрузка ...

AsBest

Профиль
Группа: Завсегдатай
Сообщений: 1089
Регистрация: 4.9.2004
Где: Калининград

Репутация: -1
Всего: 17

происходит так:

если елемент с идом 03 вызывает функцию на себя, то тогда бекграуд-имейдж меняется (срабатывает onMouseOver), а onMouseOut уже не работает. что удивительно, если елемент с идом 01 вызывает функцию на элемент с идом 03, то и onMouseOut и onMouserOver работают нормально: сначала елемент, по задумке, подсвечивается, а потом затухает.

есть какие-нибудь мысли по этому поводу? (код остаётся всё тот же)

--------------------

ок

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »