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";
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";
-
are you sure the file is named
phycho_hover.jpg? Seems like a typo – Sune Rievers Commented Dec 15, 2009 at 11:17 - yes, the names of the images are correct. – ktsixit Commented Dec 15, 2009 at 11:20
- Maybe you could post some more code? How does your content and menu items look like in HTML and how do you call the onmouseover code? – Sune Rievers Commented Dec 15, 2009 at 11:28
3 Answers
Reset to default 4Write a CSS class and call it in your JavaScript like this
document.getElementById("menu_" + modid + "_" + i).className = "yourcssclass"
and see what happens.
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";
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>