如果用图片热区做超链接,在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" onclick="doSth();"/>
但是在增加href之后,IE下就会沿着热区出现实线的焦点框,很难看,试了一下网上说的IE专属的hidefocus="true"以及还有outline=none均无效。唯一有用的是onfocus="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键就永远选择不到这个按钮了