懸停與圖像Alpha陣列

我需要的鏈路的行，其中每一個是在一個平行四邊形形狀的盒子。我正在使用Divs。我需要每個盒子交替黑/白。我希望每個盒子都有獨特的懸停顏色。懸停與圖像Alpha陣列

<div id="bar2"> 
    <ol> 
     <script type="text/javascript"> 
      for (var i = 0; i < 5; i++) 
      { 
       document.write("<a href='"); 
       document.write(chapLink[i]); 
       document.write("'><li id='li" + i + "' style='background-color:" + chapCol1[i] + "; color:" + chapCol2[i] + "'>"); 
       document.write(chapter[i]); 
       document.write("</li></a>"); 

       document.write("<img src='paragram"); 
       document.write(i+1); 
       document.write(".png'>"); 
      }; 
     </script> 
    </ol> 



var chapCol1 = new Array(); 
chapCol1[0] = 'white'; 
chapCol1[1] = 'black'; 
chapCol1[2] = 'white'; 
chapCol1[3] = 'black'; 
chapCol1[4] = 'white';

陣列適用於在大多數每個形狀的填充，但是，勿庸置疑，不覆蓋它完全。這導致了我的假設，我需要使用一系列圖像，每種顏色的組合都由懸停產生。

在此先感謝 - 希望我的問題是清楚的，哈利

來源

2013-05-19 Maurice Tempelsman

請寫下你迄今爲止所做的。 – DanielX2010

好的，那樣做。 –

好了，讓我嘗試按功能來回答：對於平行四邊形框：如果我理解得很好，你想改變黑色和白色塊，你想這些塊內的文字顏色是唯一的。我不明白爲什麼您在關閉<li>後嘗試插入圖像。我猜你試圖將平行四邊形插入塊中，對嗎？如果你希望你的<li>根據您的PNG圖像的形狀，我建議你使用它作爲你的塊的backgorund形象，而不是僅僅將其插入之後。爲此，只需在塊的style屬性中寫入background-image: your_path/your_image.png;即可。您可能需要調整塊的大小，因爲圖像可能會被「剪切」。對於調整大小，胡斯托請執行以下操作：如果，例如，假設你的圖片的寬度10個像素，高20個像素，您希望您的塊爲尺寸爲你的形象一樣。只要寫上你的塊的樣式屬性如下：width:10px;height:20px; 但不管怎麼說，我還在想，我沒有完全理解你想做的事情。關於你的最後評論說，你沒有能夠填滿整個形狀：這可能是因爲li標籤都有一個默認margin值，background-color對利潤率沒有影響。

對於懸停顏色，只需添加以下到您的div： onmouseover='this.style.color="unique_color_here";' onmouseout='this.style.color="standard_color_here";'

希望它能幫助。如果你可以更好地解釋你想要的東西，那就太好了：D 試着解釋你所擁有的圖像究竟是什麼，以及你想要對它們做什麼。

來源

2013-05-20 09:27:44 DanielX2010

非常感謝 - 這是一個非常友善的迴應！ –

Ooops - 我的問題不夠具體：這是我想改變的背景顏色。這就是爲什麼我有數組等：D希望這可以幫助你更好地理解我的問題。到目前爲止感謝：D ..... –

哦，這是背景色！我還沒有真正理解那些你有圖像，但你有兩個選擇來改變背景顏色： 1）通過做更改鼠標懸停背景圖片： '的onmouseover ='this.style.backgroundimage =「路徑/ image_with_unique_color「;」 2）改變背景顏色： onmouseover ='this.style.backgroundcolor =「unique_color_here」;'的onmouseout = 'this.style.backgroundcolor = 「standard_color_here」;' – DanielX2010

懸停與圖像Alpha陣列

回答

相關問題