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)"})
})
})
去掉html中点击map里area的边框与去掉点击链接时出现的虚线框类似，本文举例来说明去掉点击map里area的边框的两种方法，分享给大家，希望能给您带来帮助。
1.<html>2.<body>
3.<img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" />
4.<map name="Map" id="Map">
5.<area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html" />
6.</map>
7.</body>
8.</html>
1、第一种方法是：在<img>标签中加入 hidefocus="true"
Html代码
<img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" /><img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" />
2、第二种方法是：在需要去掉边框的<area>标签中加入 onfocus="blur(this)" （如果area区域较多，则每个都要加，那就显得有些麻烦了，可以用第一种方法）
Html代码
<area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html" onfocus="blur(this)" /><area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html" onfocus="blur(this)" />
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）