用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'？看起来像一个错字 – 2009-12-15 11:17:49

是的，图像的名称是正确的。 – ktsixit 2009-12-15 11:20:17

也许你可以发布一些更多的代码？您的内容和菜单项如何在HTML中看起来如何？您如何调用onmouseover代码？ – 2009-12-15 11:28:40

写CSS类并调用它在你的这样的JavaScript

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

看看会发生什么。

来源

2009-12-15 11:19:17

非常感谢您的帮助。你的解决方案工作正常:) – ktsixit 2009-12-15 11:30:34

这里是一个解决他的问题的+1 – alex 2009-12-15 11:49:57

此代码适用于我。也许你在代码中有一个错误？尝试在您的浏览器中启用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 2009-12-15 11:24:31

编辑我的答案关于代码，应该现在工作 – 2009-12-15 15:50:50

Homour我，

如果你试图用一个简单的标记来显示图像，会发生什么？你看到了吗？

I.e.

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

来源

2009-12-15 11:33:20

更容易阅读是的，会更容易阅读（和写）使用JavaScript框架，如jQuery :) – 2009-12-15 11:41:23

用JavaScript更改背景图像重复图像

回答

相关问题