如何在JavaScript中實例化背景圖片的多個實例？

好的，所以基本上當我點擊下面的按鈕我想要一個新的單獨的圖片來顯示我指定的位置。這樣，我可以在任何給定時間在頁面上的不同位置有多張這張圖片的副本。幫幫我？！如何在JavaScript中實例化背景圖片的多個實例？

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <link rel="stylesheet" type="text/css" href="styles/formstyle.css"/> 
    <script type = "text/javascript" src = "scripts/rearange.js"> 

    var count = 0; 

     function northwest(image) { 

     var temp; 
    var myElement; 
     var newDiv = document.createElement('div'); 
     newDiv.id = "image"+ count++; 
    document.body.appendChild(newDiv); 
    temp = newDiv.getAttribute("id") ; 

    myElement = document.getElementById(temp).style; 

     myElement.top = "30px"; 
     myElement.left = "340px";   }   

     function southeast(image) { 
     var myElement;//create reference 
     myElement = document.getElementById('image').style; 
     myElement.top = "338px"; 
     myElement.left = "667px"; 
    } 

    function toggle(image) { 
     var dom = document.getElementById(image); 

     if (dom.style.display == '') 
    dom.style.display = 'none'; 
    else 
    dom.style.display = ''; 

    </script> 

    <title>Exercise IV</title> 

</head> 

<body> 
    <div id = "para"> 
    Blah, Blah, Blah, Blah :)  
    </div> 

    div id ="image" ></div> 

    <div id = "links"> 
     <p style="height: 121px; width: 92px" > 
      <input type="button" value = "northwest" onclick = "javascript: northwest('image')" />    
     <input type="button" value = "northeast" onclick = "javascript: northeast('image')" />    
     <input type="button" value = "southwest" onclick = "javascript: southwest('image')" />    
     <input type="button" value = "southeast" onclick = "javascript: southeast('image')" /> 

     </p> 
    </div> 
    <div id = "show_Hide"> 
     <p style="width: 92px"> 
     &nbsp;<input type="button" value = "show/hide" onclick = "toggle('image')" /> 
     <input type="button" value = "show/hide" onclick = "toggle('image')" /> 
     <input type="button" value = "show/hide" onclick = "toggle('image')" /><input type="button" value = "show/hide" onclick = "toggle('image')" /> 
     </p> 
    </div> 

    <div id = "link" >  
     <p style="height: 14px; width: 180px">  
     <a href = "http://nova.umuc.edu/~ct386a28/lovej2ee/index.html">Home Page</a> 
     </p> 
    </div>

/*********************************CSS*******************************************/ 
    #image { 
    background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images /kito.jpg'); 
    background-repeat: no-repeat;                     
position: absolute; 
top: 199px; 
    left: 513px; 
    color: inherit; 
    width: 133px; 
    height: 107px; 
    filter:alpha(opacity=60); 
    opacity:0.6;   
    } 

    #para { 
    text-align: left; 
    font-family: Arial; 
    position: relative; 
    top: 73px; 
    left: 504px; 
    color: inherit; 
    width: 132px; 
    height: 341px; 
    }

來源

2011-03-27 Mike

有兩個圖像，你需要兩個img元素。要麼從文檔中的兩個開始（不是非常靈活），要麼在JavaScript文檔中查看document.createElement('img')。

編輯：抱歉，你說的背景圖片。同樣的事情適用，只需創建更多的DIV。你將不得不將你的CSS選擇器更改爲不是ID的東西（因爲ID應該是唯一的），所以......讓它成爲一個類。

.image { /* instead of #image */ 
    /* all that stuff */ 
}

and <div class="image"> in HTML。在JS中，你可以這樣做：

var newDiv = document.createElement('div'); 
newDiv.className = 'image';

來源

2011-03-27 00:05:25 Amadan

感謝您的幫助阿馬丹。當我嘗試改變類結構時，腳本的其餘部分停止工作（因爲它全部設置爲使用id運行）。所以我把它切換回來了。然而，使用你提到的createElement（）想法，我試圖用它來處理id。看看我的功能代碼東北，任何想法爲什麼不會顯示在我的網頁上。我修改了最新的上面。你的想法非常感謝！ – Mike 2011-03-27 05:03:54

我什至不能告訴它應該做什麼。這是一團糟:)但首先，如果你有像image0，image1 ...這樣的ID，那麼你不可能爲它們分配一個CSS（因此沒有背景圖像）。因此，請使用該類。您可以與ID並行使用它，也可以去改變腳本的其餘部分。另一件事是，有很多巫術編程正在進行：例如幾乎所有內容都從'var newDiv'到'myElement'。你已經有了ID（你剛剛生成了它），爲什麼用getAttribute再次提取它？你已經有了元素（newDiv），爲什麼用'getElementById'搜索它？ – Amadan 2011-03-27 10:58:14

嗯，我想出了這一個。我只是繼續並在網頁上放置多個div，並使用CSS來設置它們。然後我使用javascript來關閉它們。不是世界上最漂亮的劇本，但它完成了工作。感謝您的幫助Amadan。 – Mike 2011-03-27 18:03:37

如何在JavaScript中實例化背景圖片的多個實例？

回答

相關問題