從photoshop模板動態菜單項

我希望我可以得到一些關於如何正確實施一個Photoshop模板到網頁的澄清。我瞭解切片並保存方法。構建網站時，我的困惑來臨，特別是菜單欄。我希望菜單選項在訪問者懸停鏈接時更改顏色。使用Photoshop，一切都保存爲圖像。如果文字是圖像，如何讓文字改變顏色？我是否保存兩張圖片，一張黑色和一張白色，然後在懸停時使用JavaScript更改圖片？我可以用CSS而不是JavaScript來完成這項工作嗎？我將如何創建一個由多個子項目組成的下拉菜單？我需要每個子項目的單獨圖像嗎？從photoshop模板動態菜單項

希望這很清楚。正如你所看到的，這裏有很多混亂。在此先感謝

來源

2012-03-07 brandon-estrella-dev

我認爲答案是肯定的。要創建動態菜單，請使用多個圖像。我相信Adobe稱它爲創建翻轉圖像，他們有一個偉大的話題@ http://adobe.ly/zTQh7E 如果你知道任何其他方式，請讓我知道。至於現在，我將繼續創建圖像以通過JavaScript代碼進行滾動顯示。 – 2012-03-08 00:50:52

使用photoshop，您可以使用一種工具來分割菜單欄的各個部分，並自動製作多個圖像，以便將其用於菜單按鈕。

看看這個環節要做到這一點，但它是在法國（感到抱歉）：http://www.wks.fr/Creer-un-menu-black-gloss-decoupe.html

後，您可以將您的圖片是這樣的：

<table cellpadding="0" cellspacing="0" border="0" > 
    <tr> 
     <td><a href="Default.aspx"><img src="images/imagesMenu/MenuBis_01.gif" alt="" border="0" onmouseover="this.src='images/imagesMenu/Menu_01.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_01.gif'"/></a></td> 
     <td><a href="Emplacements.aspx"><img src="images/imagesMenu/MenuBis_02.gif" alt=""border="0" onmouseover="this.src='images/imagesMenu/Menu_02.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_02.gif'"/></a></td> 
     <td><a href="Tarifs.aspx"><img src="images/imagesMenu/MenuBis_03.gif" alt=""border="0" onmouseover="this.src='images/imagesMenu/Menu_03.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_03.gif'"/></a></td> 
     <td><a href="Reservation.aspx"><img src="images/imagesMenu/MenuBis_04.gif" alt=""border="0" onmouseover="this.src='images/imagesMenu/Menu_04.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_04.gif'"/></a></td> 
     <td><a href="Galerie.aspx"><img src="images/imagesMenu/MenuBis_05.gif" alt=""border="0" onmouseover="this.src='images/imagesMenu/Menu_05.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_05.gif'"/></a></td> 
     <td><a href="About.aspx"><img src="images/imagesMenu/MenuBis_06.gif" alt=""border="0" onmouseover="this.src='images/imagesMenu/Menu_06.gif'" onmouseout="this.src='images/imagesMenu/MenuBis_06.gif'"/></a></td> 
    </tr> 
</table>

你可以看到，每列當鼠標光標不在其中時，但當鼠標懸停在另一圖像上時，該表格中將顯示一個圖像。

這是一種做你想做的事的方法。還有其他方法，但這很容易做到。

來源

2012-03-09 10:15:03

從photoshop模板動態菜單項

回答

相關問題