CSS屬性去除圖片連結時的虛線框

來源:互聯網
上載者:User

CSS 之
outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。

outline 屬性是一個簡寫屬性,用於設定元素周圍的輪廓線。

注釋:輪廓線不會佔據空間,也不一定是矩形。

這就可以了,就給點選連結加這個屬性   a:active{outline:none}
可惜,IE下無效   再加一個  a:active {blr:expression(this.onFocus=this.blur());}

沒錯,就是這樣了
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
</style>
這樣網頁中的所有連結點擊都沒虛線框了(文字連結、圖片連結==)
樣本:
<style>
a:active {outline:none;blr:expression(this.onFocus=this.blur());}
img,a .img{border:0}
</style>
<a href="#"> <img src="http://bbs.blueidea.com/images/default/newtopic.gif"></a><br>
<a href="#"> <img src="http://www.baidu.com/img/baidu_logo.gif"></a><br>
<a href="#">發新帖</a>

局部控制

<a href="link1.htm" onfocus="this.blur()">link1</a>

<a href="link1.htm" onfocus="this.close()">link1</a>

<a href="link1.htm" hidefocus="true">link1</a>

<a href="link1.htm" hidefocus="hidefocus">link1</a>

全域控制 

CSS實現

a{blr:expression(this.onFocus=this.close());} /* 只支援IE,過多使用效率低 */

a{blr:expression(this.onFocus=this.blur());} /* 只支援IE,過多使用效率低 */

a:focus { -moz-outline-style: none; } /* IE不支援 */

HTC實現 IE支援,頁面載完才有效果

把下面這段代碼存為.htc為副檔名的檔案

<public:attach event="onfocus" onevent="hscfsy()"/>
<script language="javascript">
function hscfsy(){
this.blur();
}
</script>

調用 a {behavior:url(htc檔案所在路徑地址)}

JS遍曆實現

window.onload=function()
{
 for(var ii=0; ii<document.links.length; ii++)
 document.links$[$ii$]$.onfocus=function(){this.blur()}
}

JS封裝為函數

function fHideFocus(tName){
aTag=document.getElementsByTagName(tName);
for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
//for(i=0;i<aTag.length;i++)aTag$[$i$]$.onfocus=function(){this.blur();};
}

當前是添加一個hidefocus的屬性,注釋掉的句子是添加onfucus=this.blur();
然後調用fHideFocus("A"),即可把a的虛線框去掉
通過傳遞不同的參數,可以去掉更多的虛線框,比如"BUTTON"可以去掉button的
但要記住參數要用大寫字母

A. map area內連結如何消除連結虛線?

這是一個觀念上的錯誤,其實應該在所在map的圖片上加以控制,而不是在area內,參考傳統辦法

B. 關於onFocus

<a href=“http://blog.csdn.net/alonesword/“ onFocus="this.blur()">
<Img Src="Example.jpg" Border=0>
</a>

onFocus是設定滑鼠焦時間點事件的東西,這個可以用,也可以不用,不過為了讓更多的瀏覽器識別的話,建議採用Border=0 這個才是去除虛線框的關鍵所在(在網上看到有的人用onFocus="this.blur()"來消除虛線框,但在本地測試時,僅僅用這一句是不能消除的)

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.