（2012-02-03 老物搬运）去除图片热区焦点框

去除图片热区焦点框

• 空间

如果用图片热区做超链接，在FF下当鼠标指向热区的时候是会显示手型的，而在IE和Chrome下均没有反应。同样，对<area>标签的CSS设置cursor="pointer"或者别的什么指针类型，仍然是只有FF起反应，IE和Chrome还是普通的指针。

想要在所有情况下都让鼠标变成手，只有在area标签中增加href属性，比如：

<area shape="poly" href="javascript:;"   coords="32,51,103,84,97,106,21,91,11,65"  οnclick="doSth();"/>

但是在增加href之后，IE下就会沿着热区出现实线的焦点框，很难看，试了一下网上说的IE专属的hidefocus="true"以及还有outline=none均无效。唯一有用的是οnfοcus="this.blur()"，但是在标签中增加这句话之后，IE确实是没有边框了，FF下却出现了虚线焦点框。

最后妥协的办法是先判断一下浏览器决定要不要加onfocus，在JS的初始化函数中加入

function init(){ 

 //初始化的一些其他函数

  if(getOs()=='MSIE'){
     $('area').focus(function(e) { 
        $('area').blur();
    });   
   }

}

//获取浏览器类型的一个简单函数
function getOs()
{
   if(navigator.userAgent.indexOf("MSIE")>0) {
        return "MSIE";
   }
   if(navigator.userAgent.indexOf("Firefox")>0){
        return "Firefox";
   }
   if(navigator.userAgent.indexOf("Chrome")>0) {
        return "Chrome";
   }
   if(navigator.userAgent.indexOf("Safari")>0) {
        return "Safari";
   }
   if(navigator.userAgent.indexOf("Camino")>0){
        return "Camino";
   }
   if(navigator.userAgent.indexOf("Gecko")>0){
        return "Gecko";
   }
   return "unKnow";
}

 

这样写还有一个好处就是看起来干净，因为代码放到了JS文件里而不是直接写在HTML标签中，否则每个area标签都要加一行onfocus事件。"this.blur()"原理其实就是当这个元素获得焦点的时候把焦点丢失掉，也就达到了消除焦点框的墓地，但是存在的缺陷是这个链接就必须用鼠标点，想通过按tab键就永远选择不到这个按钮了

收藏于 2012-02-03

来自于百度空间