製作按鈕怎麼樣？

Question

我想給我的頁面添加一個'看中'按鈕。我看到兩種可能性：

• an a以圖片爲背景的元素並向click事件添加javascript函數。

或

• 的img元素，並添加JavaScript函數click事件。

您的意見是什麼？哪一種方法是更好的方法，爲什麼？

謝謝！

Answer 1

儘可能將UI元素定義爲CSS背景。他們不是網站內容的一部分，所以他們並不需要被搜索引擎編入索引。

從語義上講，A-tag意味着一個鏈接，因此事件應該連接到A-tag，而不是圖片。

Answer 2

其他選項包括：

• 是風格看起來像使用背景圖片
• 是風格與背景圖像和無邊框按鈕元素的按鈕的鏈接。
• 輸入元素的類型提交或按鈕樣式與背景圖像和無邊框。

我發現那個按鈕元素的效果最好，特別是如果你想要翻轉懸停效果。

jQuery UI有一個按鈕插件，它可以將任何類型的交互元素設計到一個奇特的按鈕中。

Answer 3

這取決於你想要做什麼。

在我的項目中，我們想要使用按鈕而不是javascript來提交表單，因此我們插入了一個按鈕元素。

<button type="submit">Sign Out</button> 

然後，您可以使用CSS設計按鈕樣式。

除此之外，我們使用非形式按鈕和JavaScript的圖像作爲背後的功能。

Answer 4

不知道你的「幻想」按鈕的意思，但首先看看你能如何利用CSS，在http://hellohappy.org/css3-buttons/或http://twitter.github.com/bootstrap/base-css.html#buttons找什麼例子。

如果你想要的東西比用HTML定義一個鏈接，使用和定位標記，因爲它的語義正確，並將其設置爲CSS的圖像的背景。我沒有看到有任何理由使用Javascript進行點擊事件，只要您只是想對其他頁面發出GET請求即可。

Answer 5

第一個。你有更多的選擇來設計它，並且它更容易「主題化」它。想象一個「黑暗的主題」和「輕的主題」，使用CSS，您可以輕鬆地保留相同的HTML，但您的按鈕具有完全不同的樣式和圖像。在某些瀏覽器中，圖像不是必需的;您可以使用純CSS輕鬆創建按鈕。

Answer 6

語義，<button>和<input type="button|submit|reset" />元素是在頁面中的互動元素的正確選擇。

如果你只是造型鏈接到看就像一個按鈕，然後繼續使用<a>元素，但是定義一些樣式和使用類，如<a class="button">。

差不多any element can be made into a button，如果你使用正確的屬性將保持語義。

以下是語義上相同，但<img>需要JS支持：

<!-- the image is of some fanciful text --> 
<img src="some/image.jpg" alt="Continue" role="button" tabindex="0" /> 
<input type="image" src="some/image.jpg" alt="Continue" /> 

如果你只是有一個裝飾性圖像不影響的內容，你可以使用一個span或div一個與CSS樣式：

<span role="button" tabindex="0" class="button continue-button">Continue</span> 

Answer 7

我敢肯定，你可以用普通的CSS效果，無需JS，除非你要調用某種功能，並spazz按鈕沒有必要的JS功能。

您可以簡單地使用CSS的行爲（不知道他們這樣命名）一樣活躍，懸停，焦點等..

這裏有一個例子：

http://jsfiddle.net/RQucV/2/

它有首先是背景爲紅色，點擊時變爲藍色，訪問時變爲紫色。這是可能的，因爲我使用了具有這些屬性的'a'標籤。

我只是改變了背景顏色，但你也可以改變許多其他元素，如字體，背景圖像，邊距，邊框，你的名字。

我認爲它的清潔使用，因爲JS雜波純CSS。如果您想在以後添加更多腳本，那麼當瀏覽器腳本太多時，就會發生不好的事情。此外，解析CSS實際上可能比JS更快。

另一個提示，如果你使用純粹的CSS：不是所有的瀏覽器都處理CSS，我強烈建議在樣式表中添加一個「reset.css」，以便在你使用的每個瀏覽器中同時播放。

希望它有幫助！