不要使用img標籤來當作button!

04 October 2011 — Written by Sky Chang
#HTML#JavaScript#jQuery

這個問題已經遇到不只一次,今天又被我遇到了…之前也寫過類似的,但比較著重於ASP.NET MVC的部分 ( 請參閱這裡 ),所以這此我要把這個問題特別拉出來寫。

<a href="#">
<img src="" alt="send" name="Test" width="150"
height="37" border="0" id="Test"
onclick="send();" />
</a>

以上程式碼是滿常見的一種寫法,就是使用img標籤搭配上onclick來達到按下此圖就會有某種效果的作法,簡單的說,就是把img標籤當作按鈕來使用,然後因為滑鼠移動到img上面,並不會改變滑鼠的鼠標,所以外面又包了一個a標籤…

這個做法看起來沒什麼 ( 但問題超大… ),但對於不熟悉HTML的設計師來講,這也算是達到了想要的結果,也不能說這就是網頁設計師的錯之類的,畢竟經歷過瀏覽器亂七八糟的歷史,有各種方法,也不覺得奇怪了,但未來的標準越來越重要,所以這樣的寫法,也必須要修正一下。

首先,這樣寫法的問題,其實還不一定會產生問題,像我這次碰到的例子,就是這種寫法加上Firefox再加上jQuery和jQuery UI,都好好的沒發生啥問題,但是同樣組合,運作在IE9上,恭喜!,jQuery就會發生錯誤。

就如我之前的那篇MVC 2和AJAX問題一樣,這種寫法,也不是一定會產生問題,但當產生問題的時候,也讓人往往不知所措。

那到底怎樣寫呢?

<input type="image" src=""  alt="send" name="Test" id="Test"
onclick="send();" />

是的,請使用input標籤,然後配上image屬性,這才是比較好的做法,所以不要再使用img標籤當作Button了,img標籤就是顯示圖片用,就是這樣單純。

最後,至於要改變鼠標,也請使用CSS的方式來修改,也不要再濫用a標籤了,a標籤會哭的喔…

Sky & Study4.TW