html代码
<img src="../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)"});
})
})