admin管理员组文章数量:1326689
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";
Share
Improve this question
edited Jan 29, 2012 at 0:20
Charles Sprayberry
7,8633 gold badges42 silver badges52 bronze badges
asked Dec 15, 2009 at 11:14
ktsixitktsixit
111 silver badge2 bronze badges
3
-
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>
本文标签: Change background repeat image with JavaScriptStack Overflow
版权声明:本文标题:Change background repeat image with JavaScript - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742199441a2431673.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论