이미지맵 영역 링크 흔적 지우기 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

이미지맵에 링크를 연결후 클릭하면 영역이 표시됩니다.
그것을 제어한는 방법을 정리해봅니다.
우선 https://www.happyjung.com/demo/css/imagemap.html 에서 적용된 모습을 확인하세요

브라우저에 따라서 다르게 표시되는 것을 알수 있습니다.
특히 FireFox 만 유독 다르게 표시되는 것을 해결할 방법을 아직 찾지 못하였습니다.

우선 IE, Edge, Chrome, Opera 에서 적용가능한 방법을 안내해드립니다.
onFocus="blur()" 를 적용하거나, style="outline:0;" 를 사용하면 영역표시없이 깔끔한 연결이 가능합니다.


1. onFocus="blur()" 활용하기

<img src="이미지" usemap="#Map">
<map name="Map">
<area shape="rect" coords="15,10,301,299" href="#" onFocus="blur()">
</map> 


2. style="outline:0;" 활용하기

<img src="이미지" usemap="#Map">
<map name="Map">
<area shape="rect" coords="15,10,301,299" href="#" style="outline:0;">
</map> 


3. onFocus="blur()" 와 style="outline:0;" 둘다 사용하기

<img src="이미지" usemap="#Map">
<map name="Map">
<area shape="rect" coords="15,10,301,299" href="#" style="outline:0;" onFocus="blur()">
</map> 


참고자료
https://homzzang.com/b/html-57