html代码

<img src="http://www.mamicode.com/images/account/safe_part_1.png" width="990" height="334" usemap="#safeMap"/>
<map name="safeMap" id="safeMap">
　　<area shape="rect" coords="4,191,156,233" href="http://www.cadf.org.cn/" target="_blank" />
　　<area shape="rect" coords="163,191,320,233" href="http://hk.shmzj.gov.cn/" target="_blank"/>
　　<area shape="rect" coords="322,191,480,233" href="http://www.yintongcard.com/ytcard/zh_CN/index.html" target="_blank"/>

　　<area shape="rect" coords="4,240,156,282" href="http://cn.unionpay.com/" target="_blank"/>
　　<area shape="rect" coords="163,240,320,282" href="http://www.chinaums.com/" target="_blank"/>
　　<area shape="rect" coords="322,240,480,282" href="http://www.chinapay.com/" target="_blank"/>

　　<area shape="rect" coords="4,291,156,333" href="http://www.cpic.com.cn/cpic/index.shtml" target="_blank"/>
　　<area shape="rect" coords="164,291,321,333" href="http://www.pingan.com/index.shtml" target="_blank"/>
　　<area shape="rect" coords="327,291,480,333" href="http://www.spdb.com.cn/" target="_blank"/>
</map>

效果：

问题：

当鼠标移到map的area上，鼠标点击下去时，会有一个蓝色的边框

方案：

在需要去掉边框的<area>标签中加入onfocus="blur(this);"

分析：onfocus 事件在对象获得焦点时发生，那么blur(this)则是让当前对象失去焦点。而那个鼠标按下出现的蓝色边框则是焦点线了。

注：一般为了页面美观和效果一致，要去掉这种html标签自带的效果。但是，通常情况下，尽量不要刻意去除。

若是要在每一个aera上加入，仅用js做一下处理

$(function(){

　　$.each($("#safeMap area"),function(i,val){
　　　　$(val).attr({"onfocus":"blur(this)"});

　　})

})

html里，如何去掉点击map里area的边框