html中area标签怎么变色?

html-css040

html中area标签怎么变色?,第1张

function inArea(img){

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)"})

})

})