Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Как изменить свойство Background-image?

Автор: Bangladesh 30.9.2006, 21:23

я использую прозрачный 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

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

Автор: Bangladesh 30.9.2006, 23:40

исопльзовать это свойство так и не получилось с 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'); }

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

Автор: skyboy 1.10.2006, 09:49

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

)

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

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

Автор: Bangladesh 1.10.2006, 17:46

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

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

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