카테고리 없음

링크 점선 없애기

BeInsider 2011. 3. 7. 17:53



<script>

function allblur() {
  for (i = 0; i < document.links.length; i++) {
    var obj = document.links[i];
    if(obj.addEventListener) obj.addEventListener("focus", oneblur, false);
    else if(obj.attachEvent) obj.attachEvent("onfocus", oneblur);
  }
}
 
function oneblur(e) {
  var evt = e ? e : window.event;

 

  if(evt.target) evt.target.blur();
  else if(evt.srcElement) evt.srcElement.blur();
}

</script>
<body onLoad="allblur()">

<a href=# >link</a>

 

-------------------------------------------

 


style.css에 아래 한줄 추가

a {selector-dummy: expression(this.hideFocus=true);}
 


--------------------------------------------
<a href="링크 주소" onfocus="this.blur()">
이는 이미지를 버튼으로 사용할 경우에도 적용할 수 있으나
커다란 이미지의 한 영역에 이미지맵으로 걸어놓은 링크의 점선은 없어지지 않는다.

 

 

이럴 경우, head 사이에 소스를 넣어주면 되겠다.

 

<head>
<title>무제 문서</title>
<style type="text/css">
<!--
a,area { blr:expression(this.onFocus=this.blur()) }
:focus { -moz-outline-style: none; }
-->
</style>
</head>


blur()는 웹 표준에서 지양하는 것이라서...
웹접근성 차원에서 보면 없어져야 하는것
blur()를 주게 되면 탭을 이용한 이동이 어렵다.