var id = '_$area$_', pos = this.coords.split(','), area = document.getElementById(id)
if (area) outArea(area)
area = document.createElement('a')
area.id = id, area.href = this.href, area.target = this.target, area._area = this
pos[0] -= 0, pos[1] -= 0, pos[2] -= pos[0], pos[3] -= pos[1]
with (area.style) {
position = 'absolute'
left = img.offsetLeft + pos[0] - 1
top = img.offsetTop + pos[1] - 1
width = pos[2]
height = pos[3]
border = '1px solid #ff0000'
}
area.onmouseout = function(){ outArea(area)}
document.attachEvent ? this.parentNode.appendChild(area) :
this.parentNode.replaceChild(area, this)
}
function outArea(elem){
document.attachEvent ? elem.parentNode.removeChild(elem) :
elem.parentNode.replaceChild(elem._area, elem)
}
window.onload = function(){
var map, areas, j, i = 0, imgs = document.images
for (i <imgs.lengthi++) {
map = imgs[i].useMap
if (map) if (map = document.getElementById(map.slice(1))) {
areas = map.getElementsByTagName('area')
for (j = 0j <areas.lengthj++)
areas[j].onmouseover = (function(img){
return function(){ inArea.call(this, img)}
})(imgs[i])
}
}
}
在需要去掉边框的<area>标签中加入onfocus="blur(this)"分析:onfocus
事件在对象获得焦点时发生,那么blur(this)则是让当前对象失去焦点。而那个鼠标按下出现的蓝色边框则是焦点线了。
注:一般为了页面美观和效果一致,要去掉这种html标签自带的效果。但是,通常情况下,尽量不要刻意去除。
若是要在每一个aera上加入,仅用js做一下处理
$(function(){
$.each($("#safeMap
area"),function(i,val){
$(val).attr({"onfocus":"blur(this)"})
})
})