Изменить фоновое повторение изображения с помощью JavaScript

Я пытаюсь создать скрипт, который изменяет повторяющееся фоновое изображение элемента, на событие mouseover. К сожалению, это не работает должным образом. Я нашел несколько возможных способов сделать это с помощью JavaScript, но ни один из них не работал для меня. Как я могу решить эту проблему?Изменить фоновое повторение изображения с помощью JavaScript

Следующий фрагмент кода не работает должным образом:

while (document.getElementById("content_" + modid + "_" + i) != null) { 
     document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundImage = "url(psycho_normal.jpg)"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundPosition = "top left"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundRepeat = "repeat-x"; 
     i++; 
    } 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url(phycho_hover.jpg)"; 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x";

Но если я пытаюсь использовать BackgroundColor свойство, она отлично работает:

while (document.getElementById("content_" + modid + "_" + i) != null) { 
     document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
     document.getElementById("menu_" + modid + "_" + i).style.backgroundColor = "#000000"; 
     i++; 
    } 
    document.getElementById("menu_" + modid + "_" + ind).style.backgroundColor = "#ff0000";

источник

2009-12-15 ktsixit

вы уверены, что файл с именем 'phycho_hover.jpg'? Кажется, что опечатка –

да, названия изображений верны. – ktsixit

Может быть, вы могли бы написать еще какой-нибудь код? Как выглядит ваш контент и элементы меню в HTML и как вы называете код onmouseover? –

Написать класс CSS и вызвать его в вашем JavaScript вроде этого

document.getElementById("menu_" + modid + "_" + i).className = "yourcssclass"

и посмотреть, что произойдет.

источник

2009-12-15 11:19:17

Большое вам спасибо за помощь. Ваше решение отлично работало :) – ktsixit

Вот +1 для решения его проблемы – alex

Этот код работает для меня. Может быть, у вас есть ошибка в коде? Попробуйте включить консоль JavaScript в своем браузере и посмотреть, что там зарегистрировано.

<div id="menu_a_0" onmouseover="doit(0);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
<div id="menu_a_1" onmouseover="doit(1);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 
<div id="menu_a_2" onmouseover="doit(2);" style="width:200px;height: 200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 

<div id="content_a_0"></div> 
<div id="content_a_1"></div> 
<div id="content_a_2"></div> 

<script> 
    function doit(ind) { 
     modid = "a"; 
     i = 0; 

     while (document.getElementById("content_" + modid + "_" + i) != null) { 
      document.getElementById("content_" + modid + "_" + i).style.display = "none"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundImage = "url(psycho_normal.jpg)"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundPosition = "top left"; 
      document.getElementById("menu_" + modid + "_" + i).style.backgroundRepeat = "repeat-x"; 
      i++; 
     } 
     document.getElementById("content_" + modid + "_" + ind).style.display = "block"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url(phycho_hover.jpg)"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
     document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x"; 

     return true; 
    } 
</script>

источник

2009-12-15 11:21:29

Привет и благодарю вас за ответ. Я пробовал то, что вы предлагали, но не работал. – ktsixit

Отредактировал мой ответ, касающийся кода, теперь должен работать –

Homour меня,

Что произойдет, если вы попытаетесь отобразить изображение с помощью простого тега? Вы видите это?

I.e.

<img src="phycho_hover.jpg" />

Кроме того, как в сторону, ваши множественные вызовы getElementById не помогает вашему readibility или производительности Попробуйте что-то вроде этого:

var objElem = document.getElementById("content_" + modid + "_" + i); 
while (objElem != null) { 
    objElem.style.display = "none"; 
    objElem.style.backgroundImage = "url('psycho_normal.jpg')"; 
    objElem.style.backgroundPosition = "top left"; 
    objElem.style.backgroundRepeat = "repeat-x"; 
    i++; 
    objElem = document.getElementById("content_" + modid + "_" + i); 
} 

//same idea with these: 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundImage = "url('phycho_hover.jpg')"; 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundPosition = "top left"; 
document.getElementById("menu_" + modid + "_" + ind).style.backgroundRepeat = "repeat-x";

источник

2009-12-15 11:33:20

Легче читать «да», было бы еще проще читать (и писать) с использованием инфраструктуры Javascript, например, jQuery :) –

Изменить фоновое повторение изображения с помощью JavaScript

ответ

Смежные вопросы