Change background repeat image with JavaScript

Question

I'm trying to create a script that changes the repeated background image of an element, on the mouseover event. Unfortunately it does not work properly. I have found several possible ways to do this with JavaScript but none of them has worked for me. How can I solve this problem?

The following piece of code is not working properly:

    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";

But if I try to use backgroundColor property, it works fine:

    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";

Answer 1

Write a CSS class and call it in your JavaScript like this

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

and see what happens.

Answer 2

This code works for me. Maybe you have a bug in your code somewhere? Try enabling the JavaScript console in your browser and see if anything is logged there.

<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>

Answer 3

Homour me,

What happens if you try to display the image with a simple tag? Do you see it?

I.e.

<img src="phycho_hover.jpg" />

Also, as an aside, your multiple calls to getElementById isn't helping your readibility or performance Try something like this:

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";