用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更改背景圖像重複圖像

回答

相關問題