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

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

1 голос
/ 15 декабря 2009

Я пытаюсь создать скрипт, который изменяет повторяющееся фоновое изображение элемента, при наведении курсора мыши. К сожалению, это не работает должным образом. Я нашел несколько возможных способов сделать это с помощью 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";

Ответы [ 3 ]

4 голосов
/ 15 декабря 2009

Напишите класс CSS и назовите его в своем JavaScript следующим образом 

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

и посмотрим, что получится.

1 голос
/ 15 декабря 2009

Homour me,

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

* 1005 Т.е. * 

<img src="phycho_hover.jpg" />

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

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";
1 голос
/ 15 декабря 2009

Этот код работает для меня. Может быть, у вас есть ошибка в вашем коде где-то? Попробуйте включить консоль 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>
...