如何取消圖片超連結的虛線框
- 2010-02-20
- 18589
- 0
有些時候我們必須利用圖片來做超連結，如果點下去後不是只接換掉整個網頁（target=_blank）總是會看到一個虛框包住那張圖片，實在是有礙觀瞻，此篇文章就來簡單說明一下如何拿掉這效果。
例外處理實戰 [2024-05-19]開課 共5H
以 demo 上一篇文章來做示範，被 a 標籤包住的圖片點選之後就是會出現這不好看的虛框。
這個虛框很特別他的用意是讓使用者了解現在的 focus 在哪裡，而且不同於 border 此虛框是不會佔據任何空間的，就僅僅是框住 a 標籤，因此當滑鼠的focus是在 a 標籤內就會產生這個虛框，當 focus 離開時虛框就消失，支援此效果的也只有幾種瀏覽器而已（IE、火狐、maxthon）。雖然用意是好的，但是絕大部分我們都覺得他很難看而且沒必要因此就會興起取消它的念頭，既然要取消它就必須知道他的名字，這個虛框的名字稱為 outline，是一個 CSS 2 所定義的屬性但有趣的是也不是所有的瀏覽器版本都有支援。
既然知道他是CSS那就可以利用CSS的特性來蓋掉它
a{
outline: none;
}
但是很不巧的，前面有說過不是所有瀏覽器都支援（至少IE6、7不支援）
既然CSS行不通那直接去源頭找，會出現 outline 的原因如同前文提到當滑鼠 focus 的時候就會出現，那就直接讓它不要 focus 應該就行得通。
<a href="http://demo.tc" target="_blank" onfocus="this.blur();">測試連結</a>
當加上了 onfocus='this.blur()' 後因為一 focus 就馬上取消 focus 因此虛框也就成功的不會出現了，但是不可能去每個都套用阿，所以來利用 jQuery 幫 每個 a 都加上 onfocus 的事件。
<script type="text/javascript">
$(function ()
{
$("a").focus(function ()
{
this.blur();
});
});
</script>
不是只有圖片會出現 虛框，文字的超連結也是會，只是很不明顯所以經常忽略掉。
回應討論